Foreachバインディングコンテキストを持つノックアウトテンプレートに代替行のcssクラスを適用するのに問題があります。利用可能な$index
コンテキスト変数でノックアウト2.1を使用しています。
これは紛らわしいことです:
私のテンプレート
<li class="row" data-bind="css: { alt: $index%2 }"></li>
ただし、alt
クラスは適用されません。
<li class="row" data-bind="text: $index"></li>
正しく動作し、行番号を表示します。
私はこれに数分間苦労しましたが、ノックアウト2.1で新しい バインディングコンテキスト変数 ($index
など)が導入されて以来、この質問は実際にはカバーされていなかったことがわかりました。
私が犯した間違いは、$index
自体が監視可能であり、data-bind属性の式で使用する場合はラップを解除する必要があることを単に忘れていたことです。すなわち、
<li class="row" data-bind="css: { alt: $index%2 }"></li>
になるはずです
<li class="row" data-bind="css: { alt: $index()%2 }"></li>
うわー:)
Javascriptで代替の行スタイルを作成しないでください。はるかに効率的なCSSを使用してください:)