带有$ index绑定的备用行样式

Question

我无法使用foreach绑定上下文将替代行css类应用于挖空模板。 我正在使用可用的$index上下文变量的knockout 2.1。

这有什么令人困惑的：

我的模板

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

但结果是没有应用alt类：

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

正常工作并显示行号。

Answer 1

我挣扎了几分钟，发现这个问题并没有真正涵盖，因为新的绑定上下文变量 （如$index ）已在knockout 2.1中引入

我犯的错误是我忘记了$index本身是一个可观察的，如果我们在data-bind属性中的表达式中使用它，则必须将其解包。 即

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

应该成为

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

woops :)

Answer 2

不要用Javascript做替代的行样式，使用CSS更方便:)

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