3

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

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

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

4

1 回答 1

5

有几种方法可以处理这样的事情。一种方便的方法可能是自定义绑定，它获取原始值并针对查看原始值与当前值的计算设置 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等于当前值的方法。

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

于 2012-10-23T01:46:21.070 回答