javascript - Knockout 根据 observableArray 中的值添加 CSS 类

Question

我有一个数量/输入量很大的 Knockout 应用程序，我的 HTML 模板是根据 observableArrays 中包含的值生成的，以将 HTML 模板保持在最低限度。

但是，生成到 HTML 模板中的一些输入(随机定位)将需要添加“total-val”类。

我解决这个问题的方法是在我的 tableView 函数中创建一个新的 is_total observable，它传递了一个 true/false 值，但这并没有似乎在工作。

我已经创建了一个简单/精简版的当前模板结构，可以在下面的代码笔上查看。第一个表显示了 valuesArray 中的所有值，没有 CSS 可观察值。第二个表确实包含 CSS observable，如您所见；它完全杀死了脚本。

任何指导将不胜感激!

HTML:

<input data-bind="value: value, css: { 'total-val', is_total }">

JS:

function tableView(label, value, is_total) {
  var self = this;
  self.label = ko.observable(label);
  self.value = ko.observable(value);
  self.is_total = ko.observable(is_total);
}

function viewModel() {
  var self = this;
  self.valuesArray = ko.observableArray([]);
  self.valuesArray.push(new tableView('one', 123, false));
}

http://codepen.io/anon/pen/mqElr

Answer 1

您在 css 绑定(bind)中使用逗号，请将其替换为冒号。

<table data-bind="foreach: valuesArray">
  <tr>
    <td><span data-bind="text: label"></span></td>
    <td><input data-bind="value: value, css: { 'total-val': is_total }"></td>
  </tr>
</table>