在嵌套循环中获取祖父的 $index [英] Getting $index of grand parent in a nested loop

问题描述

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

例如:

<div class="nested-loop" data-bind="foreach: 单元格"><div class="nested-nested-loop" data-bind="foreach: 候选, css : {selected : $root.isSelected($parentContext.$parentContext.$index(), $parentContext.$index(),$index())}">候选索引:<span data-bind="text: $index()"></span>单元格索引:<span data-bind="text: $parentContext.$index()"></span>行索引:<span data-bind="text: $parentContext.$parentContext.$index()"></span>

我试着这样绑定:

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

我遇到了:

<块引用>

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

解决方案

如果你想显示祖父的索引你需要 $parentContext 的 $parentContext代码>，所以你需要写:

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

http://jsfiddle.net/fjYsG/

它在您的 css 绑定中不起作用，因为您在与 foreach 相同的元素上绑定了绑定，因此绑定上下文在它们的位置没有正确设置.

您可以通过在不同元素上移动 foearch 和 css 来解决这个问题，例如使用无容器绑定系统:

<div class="nested-loop" data-bind="foreach: 单元格"><!-- ko foreach: 候选人--><div class="nested-nested-loop"数据绑定=css:{选择:$root.isSelected($parentContext.$parentContext.$index(),$parentContext.$index(), $index())}">候选索引:<span data-bind="text: $index()"></span>单元格索引:<span data-bind="text: $parentContext.$index()"></span>行索引:
<!--/ko -->

演示 JSFiddle.

How to access the index of the grand parent in the nested loop?

For example:

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

I tried to bind like this:

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

and I encountered:

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

解决方案

If you want to display the index form the grand-parent you need the $parentContext of the $parentContext, so you need to write:

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

http://jsfiddle.net/fjYsG/

It is not working in your css binding because you have the binding on the same element as your foreach so the binding context is not correctly set at their point.

You can solve this with moving the foearch and the css on different elements like using the containrless binding 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>

Demo JSFiddle.

这篇关于在嵌套循环中获取祖父的 $index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！