knockout.js 嵌套循环索引

Question

我有一个带有 foreach 和内部 foreach 循环的敲除绑定。我需要的是为每个偶数行应用替代行 css 规则，无论它是子行还是父行。如果我如下使用 $index，则最后一个子行和第一个父行可能应用了相同的样式。

<tbody data-bind="foreach: items">
    <tr data-bind="css: { alt: $index()%2 }">
        <td colspan="2">
            <a data-bind="attr: { 'href': '@Url.Action("View", "MyController")?itemId=' + Id() }"><span data-bind="text: name"></span></a>
        </td>
    </tr>
        <!-- ko foreach: subItems -->
        <tr data-bind="css: { alt: ($index()+$parentContext.$index()+1)%2 }, visible: $parent.childrenVisible()">
            <td></td>
            <td>
                <a data-bind="attr: { 'href': '@Url.Action("View", "MyController")?itemId=' + Id() }"><span data-bind="text: name"></span></a>
            </td>
        </tr>
        <!-- /ko -->                
</tbody>

问题：是否有可能在淘汰赛中使用计数器并在父循环和子循环的每次迭代中递增它？否则在这种情况下通常的技术是什么？

Answer 1

在可能的情况下在样式表本身内处理样式问题比诉诸代码要好得多。这是您可以这样做的一个例子，至少在 CSS3。通过使用 :nth-child，您可以应用交替行样式：

tr {
  background-color: #ff0000;
}

tr:nth-child(2n+1) {
  background-color: #00ff00;
}

knockout.js 嵌套循环索引

knockout.js nested looping index

knockout.js