如何在嵌套循环中访问祖父母的索引?

例如:

<div class="loop" data-bind="foreach: rows">
    <div class="nested-loop" data-bind="foreach: cells">
        <div class ="nested-nested-loop" data-bind="foreach: candidates, css : {selected : $root.isSelected($parentContext.$parentContext.$index(), $parentContext.$index(), $index())}">
            Candidate index: <span data-bind="text: $index()"></span>
            Cell index: <span data-bind="text: $parentContext.$index()"></span>
            Row index: <span data-bind="text: $parentContext.$parentContext.$index()"></span>
        </div>
    </div>
</div>


我试图这样绑定:

css : {selected : $root.isSelected($parentContext.$parentContext.$index(), $parentContext.$index(), $index())}


我遇到了:


TypeError:$parentContext.$parentContext.$index不是函数

最佳答案

如果要显示祖父母形式的索引,则需要$parentContext中的$parentContext,因此需要编写:

Row index: <span data-bind="text: $parentContext.$parentContext.$index()"></span>


http://jsfiddle.net/fjYsG/

它在您的css绑定中不起作用,因为您将绑定与foreach放在同一元素上,因此在绑定点处未正确设置绑定上下文。

您可以通过在不同元素上移动foearchcss来解决此问题,例如使用无容器绑定systax:

<div class="loop" data-bind="foreach: rows">
    <div class="nested-loop" data-bind="foreach: cells">
        <!-- ko foreach: candidates -->
            <div class="nested-nested-loop"
                data-bind="css : {selected :
                    $root.isSelected($parentContext.$parentContext.$index(),
                    $parentContext.$index(), $index())}">
              Candidate index: <span data-bind="text: $index()"></span>
              Cell index: <span data-bind="text: $parentContext.$index()"></span>
              Row index:  <span
                 data-bind="text: $parentContext.$parentContext.$index()"></span>

           </div>
        <!-- /ko -->
    </div>
</div>


演示JSFiddle

关于knockout.js - 在嵌套循环中获取祖 parent 的$ index,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20497540/

10-12 00:05
查看更多