javascript - 行の色を交互にするスタイルを組み込んだ 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 データバインディングを投入すると問題が発生します。

たとえば、データ バインディングの結果として、Index #2 行が非表示になっているとします。行は非表示になってい<tr>ますが、その行の定義はテーブルにまだ存在しています。これにより、交互の行の色が失われます。インデックス #2 はまだ存在しますが、非表示になっているため、交互の行の色に含まれています。これは、2 つの灰色の行が重なり合って表示されることを意味します。

KnockoutJS パターンを使用しながら、適切な交互のテーブル行の色を実現する方法はありますか? <tr>CSSスタイルが正しく適用されるように、マークアップから非表示を完全に削除するためのKOデータバインディングのトリックはありますか?