Knockout JS grid，绑定语句中的prorhibited chars

Question

我用Knockout js打印出一行网格。我希望我的视图能够应用基于更好的CSS类，迭代的索引可以被2整除。

这是我的绑定声明，每行都要调用：

<data-bind="css: { $index % 2 === 0 ? 'grid_row' : 'grid_a_row' }">

出现了两个问题：

• 在属性中似乎禁止使用% 宣言。我的IDE（VS2012）无法识别任何内容 在%之后作为字符串的一部分（我可以通过差异看到它 颜色）
• 这是在一个类中应用一个类还是另一个类的正确方法 昏死？或者我必须写两次$index % 2 === 0（每个班级一个）？

哪种解决方案适用？

Answer 1

您的语法略有错误。您必须使用$index() % 2 === 0并且您使用的css binding不正确。这将有效：

<div data-bind="css: { grid_row: $index() % 2 === 0, grid_a_row: $index() %2 === 1 }">

http://jsfiddle.net/PYsc2/

Answer 2

是的，你是对的：

  

这是应用一个类还是另一个类的正确方法   昏死？或者我必须两次写$ index％2 === 0（每个类一个）？

您的CSS绑定语法不正确，应该是：

css: { 'name-of-css-rule': function(){}, 'another-css-rule': function(){} }

在您的情况下，您可以制作一个可观察的内容，如：

viewModel.myBooleanFunction = ko.computed(function() {
    return this.foo() % 0 === 0 ? "even" : "odd";
}, viewModel);

并在你的CSS绑定中声明它是这样的：

data-bind="css: myBooleanFunction"

这些是动态CSS规则： 来自：http://knockoutjs.com/documentation/css-binding.html

Answer 3

或者，如果您更喜欢使用attr binding，则可以像这样使用coalesce运算符。

data-bind="attr: { class: ($index() % 2 == 0) ? 'grid_row' : 'grid_a_row' }"

请注意，它将完全覆盖class属性，并且任何其他先前声明的类将丢失。