web-dev-qa-db-ja.com

$ indexバインディングを使用した代替行スタイル

Foreachバインディングコンテキストを持つノックアウトテンプレートに代替行のcssクラスを適用するのに問題があります。利用可能な$indexコンテキスト変数でノックアウト2.1を使用しています。

これは紛らわしいことです:

私のテンプレート

<li class="row" data-bind="css: { alt: $index%2 }"></li>

ただし、altクラスは適用されません。

<li class="row" data-bind="text: $index"></li>

正しく動作し、行番号を表示します。

35

私はこれに数分間苦労しましたが、ノックアウト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>

うわー:)

71

Javascriptで代替の行スタイルを作成しないでください。はるかに効率的なCSSを使用してください:)

https://developer.mozilla.org/en-US/docs/CSS/:nth-child

12
Maarten