foreach - knockoutjs - propiedad de bucle externo anidado knockout.js anidado por acceso

knockoutjs $root

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

Incluso puede recorrer las matrices completamente independientes usando $parent y as alias en el enlace foreach .

Considere el siguiente ejemplo :

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>  

Answer 2

Para acceder a una propiedad en el bucle externo desde el objeto actual en el bucle interno, puede usar $parent.property_name .

P.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 salesInfo matriz salesInfo :

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

Answer 3

Puede usar $parent para acceder a un nivel de nivel superior. Por lo tanto, desde su bucle interno puede usar parent para acceder al elemento actual que se está enlazando en su graduationDateRows