【问题标题】：Knockout JS: property specific css binding expressionKnockout JS：属性特定的 css 绑定表达式
【发布时间】：2013-01-08 06:07:51
【问题描述】：
请参阅以下 jsFiddle 链接：http://jsfiddle.net/7gS6N/。
我正在尝试通过敲除 js 执行一些简单的字段级验证。
单击“添加错误”模拟为名称字段添加错误。
当错误添加到 Errors 集合时，css 绑定会触发，表达式的计算结果为 true 并应用 css 类。
这很好，但是如何使我的 css 绑定表达式属性具体化？
css: { error: Errors().length > 0 }
我只希望名称字段显示 css 类。
谢谢！
【问题讨论】：
标签：
javascript
knockout.js
【解决方案1】：
你需要一个额外的 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 以及您希望所有这些特定字段具有的其他属性。最后，我用工作示例更新了您的小提琴here。