knockout.js zagnieżdżony dostęp do foreach dostęp do własności pętli zewnętrznej

Question

Mam zagnieżdżoną pętlę foreach w knockout.js i chcę uzyskać dostęp do właściwości z bieżącego obiektu w zewnętrznej pętli wewnątrz wewnętrznej pętli. Jak to zrobić?

<!-- 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

Możesz użyć $parent, aby uzyskać dostęp do jednego poziomu zakresu w górę. Tak więc, z wewnętrznej pętli można użyć, aby uzyskać dostęp parent obecna pozycja jest zapętlony na twojej graduationDateRows

Answer 2

Aby uzyskać dostęp do właściwości w zewnętrznej pętli z bieżącego obiektu w pętli wewnętrznej można wykorzystać $parent.property_name.

Np .:

<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> 

próbki Przedmiotem salesInfo tablicy:

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

Answer 3

Można nawet pętli całkowicie niezwiązanych z wykorzystaniem tablic$parent i as aliasingu w foreach wiążące.

Rozważmy 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>