knockout.js foreach imbriquée accès à boucle externe de la propriété

J'ai une boucle foreach imbriquée dans knockout.js et je veux accéder à une propriété de l'objet courant dans la boucle externe à l'intérieur de la boucle interne. Comment puis-je faire?

<!-- 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 -->
InformationsquelleAutor Adam Levitt | 2012-06-12
  1. 26

    Vous pouvez utiliser $parent pour accéder à une portée de niveau. Donc, à partir de votre boucle interne vous pouvez utiliser parent pour accéder à l'élément en cours en cours en boucle dans votre graduationDateRows

    • Mais vous ne pouvez pas utiliser $parent.$index, il me semble.
    • Toutefois, vous pouvez utiliser $parentContext.
    InformationsquelleAutor RP Niemeyer
  2. 15

    Vous pouvez même faire une boucle par complètement sans rapport avec les tableaux à l'aide de $parent et as de l'aliasing dans les foreach de liaison.

    Envisager l'exemple suivant:

    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>
    • C'est beaucoup beaucoup mieux, car il élimine l'ambiguïté
    InformationsquelleAutor Stas Slabko
  3. 7

    D'accéder à une propriété dans la boucle externe de l'objet courant dans la boucle interne, vous pouvez utiliser $parent.property_name.

    E. g.:

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

    Exemple d'objet de salesInfo tableau:

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