foreach 및 템플릿 내의 녹아웃 구성 요소

구성 요소 및 사용자 정의 요소의 도입으로 논리 및 마크 업을 캡슐화하는 것이 훨씬 쉬워 보이지만 전달해야 할 경우 foreach 섹션에서 구성 요소를 사용하는 방법을 확신 할 수 없습니다 뷰 모델에서.foreach 및 템플릿 내의 녹아웃 구성 요소

그래서 내 현재의 시나리오는 내가 좋아하는 뭔가 보이는 뷰 모델을 가지고있다 : 우리가 부분적인 데이터를 포함하는 POJO를 가지고 위의 지금

function SomePartialViewModel() 
{ 
    this.Name = ko.observable(); 
    this.Score = ko.observable(); 
    this.SomeDate = ko.observable(); 
} 

function SomeViewModel() 
{ 
    this.DataFromWebServiceCall = ko.observableArray(); 

    this.GetDataFromServer = function(){ 
     // get some data from service and populate DataFromWebSeriviceCall with instances of SomePartialViewModel 
    } 
}

을, 우리는 뷰의 기본보기 모델이 웹 서비스 또는 뭔가를 접촉하고 해당 배열을 부분의 인스턴스로 채 웁니다. 그런 다음이 현재과 같이 사용됩니다 :

<div id="partial-data" data-bind="template: { name: 'partial-view', foreach: DataFromWebServiceCall }"></div> 

<div class="partial-view"> 
    <label data-bind="text: Name"></label> 
    <label data-bind="text: Score"></label> 
    <label data-bind="text: SomeDate"></label> 
</div>

는 이제 .partial-view 올바른 템플릿 이름 등을 가진 스크립트 태그에 있고 올바른 템플릿 가정, 다음 #partial-data은 주 화면에 모든을 표시하고 싶어 페이지의 인스턴스. 이제는 현재 모두 작동하지만 더 많은 컴포넌트 기반 모델로 이동하고 싶습니다. 템플릿은 SomePartialViewModel 데이터에 의존하기 때문에 템플릿과 뷰 모델을 가질 수 있지만 문제는 해결되지 않았습니다. 구성 요소에 뷰 모델을 가져 오는 중, 설치 시간에 구성 요소를 등록 할 때 params를 사용하여 구성 요소를 채 웁니다. 그러나이 경우 바인딩 시간에 컴포넌트에 viewmodel을 전달하고 싶습니다 ...

그래서 템플릿을 사용하여 구성 요소를 등록 할 수 있지만 상상할 수는 없지만 어떻게하면이 작업을 수행 할 수 있는지 궁금합니다. , 거기에 $data 속성을 설정할 수 있으며 뷰에 대한 템플릿 바인딩에서 foreach로 이동할 수있는 data 스타일 바인딩이라는 개념이 있습니까?

잘만되면 내가 풀려고하는 문제를 볼 수 있으며 어떤 정보라도 훌륭 할 것입니다.

출처

2014-09-14 Grofit

당신은 viewModels에서 viewModels를 정의 할 수 있습니다 :

을 당신이 당신이 원하는 구성 요소를 기반으로 모델을 만들 수 있습니다 바인딩 "와"다른 뷰 모델을 정의 할 수 있습니다 관찰 정의하고 사용하는 것과 같습니다.

먼저 구성 요소와 하위 구성 요소 및 하위 하위 구성 요소 등 viewModels를 별도로 만듭니다.

var SomePartialViewModel = function() 
{ 
    this.Name = ko.observable(); 
    this.Score = ko.observable(); 
    this.SomeDate = ko.observable(); 
} 

var SomeViewModel = function() 
{ 
    this.DataFromWebServiceCall = ko.observableArray(); 

    this.GetDataFromServer = function(){ 
     // get some data from service and populate DataFromWebSeriviceCall with instances of SomePartialViewModel 
    } 

    this.SPM = new SomePartialViewModel(); // partial-1 
}

그리고 MainViewModel을 만들고 여기에 모든 주요 요소를 바인딩합니다.

var MainViewModel = function() { 

    var self = this; 

    self.SVM = new SomeViewModel(); 

    self.SPM = new SomePartialViewModel(); // partial-2 
} 
ko.applyBindings(new MainViewModel());

다음 HTML에서 당신은 녹아웃 기관

... 

    <body> 
    <div data-bind="with: SVM"> 
     .... 
     <div data-bind="with: SPM"> 
      <!-- partial-1 data --> 
     </div> 
     ... 
    </div> 


    <div data-bind="with: SPM"> 
     <!-- partial-2 data --> 
    </div> 
    </body> 
...

당신은 당신의 구성 요소 모델에 대한 별도의 파일을 만들 수 있습니다에 생성 된 문맥을 순종하고 필요 같은 모듈 스크립트 로더를 사용하여 구성 요소를 만들 수 있습니다 js 당신은 완전한 구성 요소 기반 녹아웃 웹 응용 프로그램에 모두 바인딩 할 수 있습니다

출처

2014-09-15 08:03:17 Azadrum

이것은 관찰 가능한 라운드 뷰 모델 배열을 반복하는 문제를 실제로 처리하지 않습니다. N 개의 SomePartialViewModel이있을 수 있고, 런타임 모델을 어떻게 든 컴포넌트의 VM에 연결할 수 있어야합니다. – Grofit

params을 사용하여 구성 요소에 값 및/또는보기 모델을 전달하는 많은 방법이 있습니다.당신이 createViewModel 방법을 사용하는 경우

, 당신은 단지 PARAMS를 통해 뷰 모델에 전달하고 구성 요소 뷰 모델로 부분 뷰 모델을 사용할 수 있습니다

ko.components.register("partial-view", { 
    viewModel: { 
     createViewModel: function (params) { 
      return params.value; 
     } 
    }, 
    template: "<div>Partial View for <b data-bind='text: Name'></b></div>" 
});

당신이 바이올린에서 동작하는 예제를 볼 수 있습니다 http://jsfiddle.net/Quango/fn1ymf9w/

출처

2014-11-14 14:30:23 Quango

foreach 및 템플릿 내의 녹아웃 구성 요소

답변

관련 문제