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嵌套循环索引

1 个答案: