KnockoutJS 表格包含用于交替行颜色的样式

Question

我在我的 HTML 中使用 KnockoutJS 将表格行的可见性数据绑定到某些可观察值，如我随附的 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>

当应用程序运行时，可以通过使用这些数据绑定的if 值来隐藏或显示表中的行。为了给表格的行交替颜色（斑马/条纹），我在我的 CSS 中定义了以下内容：

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

通常，此 CSS 会正确设置行的样式。偶数行将涂成黑色，奇数行将涂成灰色。但是，当您放入 Knockout 数据绑定时，就会出现我的问题。

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

在使用我的 KnockoutJS 模式的同时，是否有任何方法可以实现正确的交替表格行颜色？ KO数据绑定是否有一些技巧可以从标记中完全删除隐藏的<tr>，以便正确应用CSS样式？

Answer 1

您可以仅将特定类分配给可见元素，并仅为该类应用斑马样式。 数据绑定如下所示：

<table class="myTable">
    <tr data-bind="if: thisRowVisible, attr: {'class': thisRowVisible ? 'rowVisible' : 'rowInvisible' "> <!-- Arbitrary data here --> </tr>
    <tr data-bind="if: thatRowVisible, attr: {'class': thatRowVisible ? 'rowVisible' : 'rowInvisible'"> <!-- Arbitrary data here --> </tr>
    <tr data-bind="if: thatIsNotVisible, attr: {'class': thatIsNotVisible ? 'rowVisible' : 'rowInvisible'"> <!-- Arbitrary data here --> </tr>
    <!-- More rows defined here -->
</table>

还有CSS：

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

FIDDLE EXAMPLE

Answer 2

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