knockout.js lồng nhau foreach truy cập tài sản vòng lặp bên ngoài

Question

Tôi có một vòng lặp forested lồng nhau trong knockout.js và tôi muốn truy cập một thuộc tính từ đối tượng hiện tại trong vòng lặp bên ngoài bên trong vòng lặp bên trong. Làm thế nào tôi sẽ làm điều này?

<!-- ko foreach: graduationDateRows -->     
    <tr> 
    <td class="center" data-bind="text: CalendarYear"></td> 
    <!-- ko foreach: $root.graduationDatesHeaders --> 
    <td class="center" data-bind="text: /* !here! */"></td> 
    <td></td> 
    <!-- /ko -->                 
    </tr> 
<!-- /ko --> 

Answer 1

Bạn có thể sử dụng $parent để truy cập một cấp độ phạm vi. Vì vậy, từ vòng lặp bên trong, bạn có thể sử dụng parent để truy cập mục hiện tại đang được lặp lại trong graduationDateRows

Answer 2

của bạn.

ví dụ .:

<ul id="salesInfo" data-bind="foreach : salesInfo "> 
    <li class="department"> 
     <a href="#" data-bind="text: name" /> 
     <ul id="salesDept" data-bind="foreach: years"> 
      <li class="years"> 
       <a href="#" data-bind="text: year, click:function(data, event) { $root.yearClicked(year,$parent.name,data) }" /> 
      </li> 
     </ul> 
    </li> 
</ul> 

đối tượng Mẫu salesInfo mảng:

{ 
    "id" : "0", 
    "name" : "Human Resources", 
    "years" : [ 
     { "year" : "2012", "values" : [250000,350000,150000,220000,450000,180000] } 
    ] 
} 

Answer 3

Bạn thậm chí có thể lặp qua mảng hoàn toàn không liên quan sử dụng $parent và as răng cưa trong foreach ràng buộc.

Cân nhắc the following example:.

var VM = function(){ 
    this.rows = ['one','two','three']; 
    this.cols = [1,2,3,4,5]; 
} 
ko.applyBindings(new VM()); 

<table border="1"> 
    <tr> 
     <th></th> 
     <!-- ko foreach: cols --> 
     <th data-bind="text: $data"></th> 
     <!-- /ko --> 
    </tr> 
    <!-- ko foreach: {data: rows, as: 'row'} --> 
    <tr> 
     <th data-bind="text:row"></th> 
     <!-- ko foreach: {data: $parent.cols, as: 'col'} --> 
     <td data-bind="text:row + '/' + col"></td> 
     <!-- /ko --> 
    </tr> 
    <!-- /ko --> 
</table>