我有一个包含大约 50 个各种输入的 Knockout View。我已经通过以下代码跟踪模型何时发生更改
self.Changed = ko.computed(function() {
return ko.toJS(self.Outing);
});
然后订阅 Changed 函数将模型保存回服务器。我想要完成的是，当用户更改单个输入时，它会触发对该输入的 css 绑定以突出显示它，以便用户知道他/她更改了什么。如果不单独订阅每个可观察属性，我该如何做到这一点？
【问题讨论】：
标签： knockout.js
有几种方法可以处理这样的事情。一种方便的方法可能是自定义绑定，它获取原始值并针对查看原始值与当前值的计算设置一个 css 绑定。
可能是这样的：
ko.bindingHandlers.changedCss = {
init: function(element, valueAccessor, allBindings) {
var original, isDirty, data, cssClass, binding;
data = allBindings().value;
original = ko.utils.unwrapObservable(data);
isDirty = ko.computed({
read: function() {
return ko.utils.unwrapObservable(data) !== original;
},
disposeWhenNodeIsRemoved: element
});
cssClass = ko.utils.unwrapObservable(valueAccessor());
binding = { css: {} };
binding.css[cssClass] = isDirty;
ko.applyBindingsToNode(element, binding);
}
};
你会像这样使用它：<input data-bind="value: first, changedCss: 'changed'" />
因此，我们的想法是我们寻找绑定 value 的对象，并即时设置计算的 observable 为我们提供此属性的脏标志。然后，使用传递给绑定的类名以编程方式添加css 绑定。
http://jsfiddle.net/rniemeyer/PCmma/
或者，您可以创建一个扩展，让您从视图模型端添加此脏跟踪。这会给你一些额外的灵活性，比如重置跟踪的能力（认为当前值是干净的）。对于初学者，您可以执行以下操作：
ko.subscribable.fn.trackDirtyFlag = function() {
var original = this();
this.isDirty = ko.computed(function() {
return this() !== original;
}, this);
return this;
};
然后，像这样使用它：this.first = ko.observable("John").trackDirtyFlag();
http://jsfiddle.net/rniemeyer/JtvWd/
然后您可以添加一个reset 方法，将original 设置为当前值。
如果您的目标只是能够为脏字段着色，那么自定义绑定可能是一个不错的选择，因为您根本不需要更改视图模型。
【讨论】：