knockout.js - 在嵌套循环中获取祖 parent 的 $index

Question

如何在嵌套循环中访问祖 parent 的索引？

例如:

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

我试着像这样绑定(bind):

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

我遇到了:

TypeError: $parentContext.$parentContext.$index is not a function

Answer 1

如果要显示祖 parent 的索引，则需要 $parentContext的$parentContext ，所以你需要写:

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

http://jsfiddle.net/fjYsG/

它不适用于您的 css绑定(bind)，因为您在与 foreach 相同的元素上具有绑定(bind)。所以绑定(bind)上下文没有正确设置。

您可以通过移动 foearch 来解决此问题。和 css在不同的元素上，比如使用无容器绑定(bind)系统:

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