javascript - knockout JS : property specific css binding expression

Question

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

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

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

当错误被添加到 Errors 集合时，css 绑定(bind)会触发，表达式计算为真并应用 css 类。

这很好，但是我怎样才能使我的 css 绑定(bind)表达式属性特定呢？

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 和您希望所有这些特定字段都具有的其他属性。最后，我更新了你的 fiddle here与工作示例。