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>完全从Markup中删除隐藏,以便正确应用CSS样式？

Answer 1

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