Question

我有一个非常数字/输入重的Knockout应用程序，我的HTML模板是从observableArrays中包含的值生成的，以使HTML模板保持最小。

然而，生成到HTML模板中的一些输入（随机定位）将需要“总计”的类别。加入他们。

我之所以这样做，就是在我的is_total函数中创建一个新的tableView可观察对象，它会传递一个真值/假值，但这似乎并不是工作。

我创建了一个当前模板结构的简单/精简版本，可以在下面的codepen中查看。第一个表显示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绑定中使用逗号，请用冒号替换它。

<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>

Answer 2

另一个替代

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

同时建议不要使用连字符，因此如果将其转换为

会更好

<input data-bind="value: value, style: { 'totalval', is_total }">

查看文档 http://knockoutjs.com/documentation/style-binding.html

Note: Applying styles whose names aren’t legal JavaScript variable names

If you want to apply a font-weight or text-decoration style, or any other style whose  
name isn’t a legal JavaScript identifier (e.g., because it contains a hyphen), you must 
use the JavaScript name for that style. For example, 

Don’t write { font-weight: someValue }; do write { fontWeight: someValue }
Don’t write { text-decoration: someValue }; do write { textDecoration: someValue }

Knockout根据observableArray中的值添加CSS类

2 个答案: