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

Question

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

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

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

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

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

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

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

谢谢！

score 1 · Accepted Answer

你需要一个额外的 observable，所以而不是

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

你用

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

其中字段具有以下结构

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以及您希望所有这些特定字段具有的其他属性。最后，我在这里用工作示例更新了你的小提琴。

1 回答 1