knockout foreach 중첩 문제

Question

ko.applyBindings()이 (가) 사용 된 기본 viewmodel의 하위보기 모델 인 두 개의 viewmodels 속성을 사용하여 테이블을 생성하려고합니다.

아이디어는 첫 번째 셀이 요소의 이름 인 SubVM1의 각 요소에 대한 행을 생성하는 것입니다. 그런 다음 SubVM2의 모든 요소에 대해 추가 셀이 행에 추가됩니다.

행이 올바르게 생성되고 첫 번째 셀에 SubVM1 이름이 표시되지만 많은 요소가 SubVM2에있는 대신 하나의 셀만 나타납니다.

또한 데이터 바인딩의 기능도 작동하지 않습니다. SubV2의 프로토 타입으로 Value 함수를 선언하려했지만 정의되지 않은 값으로 오류가 발생했습니다.

무엇이든지간에 확실한 것은 바인딩 컨텍스트에서 분명히 일어나고 있으며 도움을 주시면 감사하겠습니다.

<tbody data-bind="foreach: {data: SubViewModel1, as: 'SubVM1'}"> 
    <tr> 
     <td data-bind="text: SubVM1.Name" /> 
     <!-- ko foreach: {data: $root.SubViewModel2, as: 'SubVM2'} --> 
      <td data-bind="text: Value(SubVM1.Type)"></td> 
     <!-- /ko --> 
    </tr> 
</tbody> 

편집 : 일부 jsfiddle 수행 : 내가 볼 수있는 몇 가지가 있습니다 http://jsfiddle.net/jgr71o8t/1

Answer 1

. 첫 번째 것은 <td data-bind='' />입니다.
녹아웃은 일반적으로 자체 폐쇄 태그를 좋아하지 않습니다. 항상 닫는 태그를 사용하십시오.이 경우 <td data-bind=''></td>

두 번째로 ko.observable 또는 ko.observableArray가 화면에 업데이트되어야합니다. ko.applyBindings 후 속성에 대한 변경이

는 HTML

<table border="1"> 
    <tbody data-bind="foreach: {data: subViewModel1, as: 'SubVM1'}"> 
     <tr> 
      <td data-bind="text: name"></td> 
      <!-- ko foreach: {data: $root.subViewModel2, as: 'SubVM2'} --> 
       <td data-bind="text: SubVM2.Value(SubVM1.Type)"></td> 
      <!-- /ko --> 
     </tr> 
    </tbody> 
</table> 

JS Fiddle Demo with knockout bindings on all properties

function MasterViewModel() { 
    var self = this; 
    self.subViewModel1 = ko.observableArray([]); 
    self.subViewModel2 = ko.observableArray([]); 
} 

function SubVM1ViewModel() { 
    var self = this; 
    self.name = ko.observable("Sub View Model 1"); 
    self.otherProperty = ko.observable(43); 
} 

function SubVM2ViewModel() { 
    var self = this; 
    self.title = ko.observable('Sub View Model 2'); 
    self.subVM1List = ko.observableArray([]); 
} 

SubVM2ViewModel.prototype.Value = function (type) { 
    for (var i = 0; i < this.subVM1List().length; i++) { 
     if (this.subVM1List()[i].Type === type) { 
      return this.subVM1List()[i].name(); 
     } 
    } 
}; 

var masterVM = new MasterViewModel(); 

var subVM2 = new SubVM2ViewModel(); 
subVM2.subVM1List.push(new SubVM1ViewModel()); 

masterVM.subViewModel1.push(new SubVM1ViewModel()); 
masterVM.subViewModel2.push(subVM2); 

ko.applyBindings(masterVM); 

JS Fiddle Demo with straight javascript properties

function MasterViewModel() { 
    var self = this; 
    self.subViewModel1 = []; 
    self.subViewModel2 = []; 
} 

function SubVM1ViewModel() { 
    var self = this; 
    self.name = "Sub View Model 1"; 
    self.otherProperty =43; 
} 

function SubVM2ViewModel() { 
    var self = this; 
    self.title = 'Sub View Model 2'; 
    self.subVM1List = []; 
} 

SubVM2ViewModel.prototype.Value = function (type) { 
    for (var i = 0; i < this.subVM1List.length; i++) { 
     if (this.subVM1List[i].Type === type) { 
      return this.subVM1List[i].name; 
     } 
    } 
}; 

var masterVM = new MasterViewModel(); 

var subVM2 = new SubVM2ViewModel(); 
subVM2.subVM1List.push(new SubVM1ViewModel()); 

masterVM.subViewModel1.push(new SubVM1ViewModel()); 
masterVM.subViewModel2.push(subVM2); 

ko.applyBindings(masterVM);