javascript - 淘汰JS网格，绑定语句中的禁止字符

Question

我正在使用 Knockout js 打印出网格的行。我希望我的视图基于迭代的索引是否可被 2 整除来应用 CSS 类。

这是我的绑定语句，为每一行调用：

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

出现两个问题：

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

哪些解决方案适用？

Answer 1

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

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

http://jsfiddle.net/PYsc2/

Answer 2

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

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

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

Answer 3

是的，你是对的：

这是在 Knockout 中应用一类或另一类的正确方法吗？还是我必须写两次 $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