Question

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

任何人都可以知道如何使用knockout js实现这一目标吗？

Answer 1

首先创建一个重置绑定，例如

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这很棒，可以让您回滚更改或提交更改等。

如何在knockoutjs中实现重置功能

2 个答案: