如何在 knockoutjs 中实现重置功能

Question

我有 20 个文本框与敲除 observables 绑定。最初，这些文本框与数据库中的数据绑定。当用户编辑文本框并单击重置按钮时，需要恢复旧的（从数据库中获取的数据）。

任何人都知道如何使用淘汰赛 js 来实现这一点吗？

Answer 1

首先创建一个reset绑定，例如

ko.bindingHandlers.resetValue = {
    init: function(element, valueAccessor){
        var attribute = valueAccessor();

        attribute.initialValue = ko.unwrap(attribute);

        attribute.reset = function(){
            if(attribute.isDirty()){
                attribute(attribute.initialValue);
            }            
        };

        attribute.isDirty = ko.computed(function(){
            return attribute.initialValue !== ko.utils.unwrapObservable(attribute);
        });

        ko.applyBindingsToNode(element, {
            click: function(){
                attribute.reset();
            },
            visible: attribute.isDirty            
        });
    }
};

这里有更多关于Creating custom bindings的信息

现在我们可以使用resetValue 绑定了

<div>
    <a href="#" data-bind="resetValue: firstName">Reset</a>
    <input data-bind="value: firstName"></input>
</div>
<div>
    <a href="#" data-bind="resetValue: lastName">Reset</a>
    <input data-bind="value: lastName"></input>
</div>

这里是 ViewModel

var ViewModel = function(){
    var self = this;
    self.firstName = ko.observable("First Name");
    self.lastName = ko.observable("Last Name");
};

ko.applyBindings(new ViewModel());

看看jsfiddle version

Answer 2

我使用this plugin，这很棒，可以让您回滚更改或提交更改等。