knockout.js anidado foreach acceso propiedad del bucle exterior

Question

Tengo un bucle foreach anidado en knockout.js y quiero acceder a una propiedad desde el objeto actual en el bucle externo dentro del bucle interno. ¿Cómo haría esto?

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

Puede usar $parent para acceder a un nivel de alcance arriba. Así, desde su bucle interno puede utilizar parent para acceder al elemento actual que está siendo enrollado en tu graduationDateRows

Answer 2

Para acceder a una propiedad en el bucle exterior del objeto actual en el bucle interno puede utilizar $parent.property_name.

ej .:

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

objeto de muestra de salesInfo array:

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

Answer 3

Puede incluso bucle a través de matrices completamente no relacionados utilizando $parent y as aliasing en foreach vinculante.

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