knockout.js - 跟踪 Knockout 模型中的更改并在输入更改时触发 CSS 中的更改

Question

我有一个包含大约 50 个各种输入的 Knockout View。我已经通过以下代码跟踪何时对模型进行了更改

self.Changed = ko.computed(function() {
    return ko.toJS(self.Outing);
});

然后订阅 Changed 函数将模型保存回服务器。我想要完成的是，当用户更改单个输入时，它会触发对该输入的 css 绑定(bind)以突出显示它，以便用户知道他/她更改了什么。如果不单独订阅每个可观察属性，我该如何做到这一点？

Answer 1

有几种方法可以处理这样的事情。执行此操作的一种简便方法可能是自定义绑定(bind)，它获取原始值并针对查看原始值与当前值的计算设置 css 绑定(bind)。

也许是这样的:

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 的内容绑定(bind)绑定(bind)并设置一个动态计算的可观察对象，为我们提供此属性的脏标志。然后，以编程方式添加 css使用传递给绑定(bind)的类名进行绑定(bind)。

http://jsfiddle.net/rniemeyer/PCmma/

或者，您可以创建一个扩展，让您从 View 模型端添加这种脏跟踪。这会给你一些额外的灵 active ，比如重置跟踪的能力(考虑当前值是干净的)。对于初学者，您可以执行以下操作:

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 的方法等于当前值。

如果您的目标只是能够为脏字段着色，那么自定义绑定(bind)可能是一个不错的选择，因为您根本不需要更改 View 模型。