javascript - KnockoutJS 表格包含交替行颜色的样式

Question

我在我的 HTML 中使用 KnockoutJS 将表格行的可见性数据绑定(bind)到某些可观察值，如我随附的 JavaScript 中定义的那样。我的表看起来像这样:

<table class="myTable">
    <tr data-bind="if: thisRowVisible"> <!-- Arbitrary data here --> </tr>
    <tr data-bind="if: thatRowVisible"> <!-- Arbitrary data here --> </tr>
    <tr data-bind="if: anotherRowVisible"> <!-- Arbitrary data here --> </tr>
    <!-- More rows defined here -->
</table>

在应用程序运行时，可以隐藏或显示表格的行，方法是使用这些数据绑定(bind) if值。为了给表格的行交替颜色(斑马纹/条纹)，我在我的 CSS 中定义了以下内容:

.myTable tr:nth-child(even) td {
   background-color: black;
}
.myTable tr:nth-child(odd) td {
   background-color: gray;
}

通常，此 CSS 会正确设置行的样式。偶数行为黑色，奇数行为灰色。但是，当您输入 Knockout 数据绑定(bind)时，我的问题就出现了。

例如，假设由于我的数据绑定(bind)，索引#2 行被隐藏了。即使该行被隐藏，我的 <tr>该行的定义仍然存在于表中。这会丢弃交替的行颜色。由于索引 #2 仍然存在，但已隐藏，因此它仍包含在交替行颜色中。这意味着两个灰色行将出现在彼此之上。

有没有什么方法可以实现正确的表格行颜色交替，同时仍然使用我的 KnockoutJS 模式？ KO 数据绑定(bind)是否有一些技巧可以删除隐藏的 <tr>完全来自标记，以便正确应用 CSS 样式？

Answer 1

可以使用虚拟元素<!-- ko 'if': thisRowVisible --> .
工作示例:http://jsfiddle.net/zs4B2/1/ .