Knockout JS：属性特定的css绑定表达式

Question

请参阅以下jsFiddle链接：http://jsfiddle.net/7gS6N/。

我正在尝试通过knockout js执行一些简单的字段级验证。

单击“添加错误”以模拟为名称字段添加错误。

当错误被添加到Errors集合中时，css绑定将触发，表达式的计算结果为true，并且应用了css类。

这很好，但是如何使我的css绑定表达式属性具体？

css: { error: Errors().length > 0 }

我只希望Name字段显示css类。

谢谢！

Answer 1

你需要一个额外的可观察量，而不是

self.Name = ko.observable("John")

你使用

self.Name = new Field("John Smith");

其中Field具有以下结构

function Field(value) {
  var self = this;
  self.value = ko.observable(value);
  self.hasError = ko.observable(false);
}

您的标记看起来像

<div data-bind="with:Name">
  <input type="text" data-bind="value: value, css: { error: hasError }" />
</div>

这种策略被称为装饰一个对象;在这种情况下，我将您的变量“包装”在一个类中，但是从那里您可以添加label，errorMessage以及您希望所有这些特定字段具有的其他属性。最后，我用工作示例更新了您的小提琴here。