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

Question

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

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

然后订阅Changed功能将模型保存回服务器.我想要完成的是当用户更改单个输入时,它会触发对该输入的css绑定以突出显示它,以便用户知道他/她更改了什么.如何在不单独订阅每个可观察的房产的情况下这样做？

Answer 1

有几种方法可以处理这样的事情.一种方便的方法可能是一个自定义绑定,它抓取原始值并设置一个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等于当前值.

如果您的目标只是为脏字段着色,那么自定义绑定可能是一个不错的选择,因为您根本不需要更改视图模型.