Knockout.js 单击按钮绑定可观察值

我使用knockout通过JSON获取和接收对象。 我有一个表单，用于显示和编辑绑定到Javascript类的值。 我的表单有一个保存和放弃我的值的选项。 问题是，如果我在一个观察到的属性中输入一个值并单击discard，那么这些值不会传输到webservice，而是保存在我的“display form”中，我不希望这样做。如果单击“放弃”，将再次显示原始值。 是否可以对按钮点击事件（如点击“保存”）执行我的值更新？ 下面是我当前代码的一个片段：

jQuery(document).ready(function(){
    ko.applyBindings(new MyModel());
});

function MyModel(){
   this.Name = ko.observable("Bob");
}

<div data-bind="text: Name"></div>
<input type="text" data-bind="value: Name" />
<input type="button" onclick="discardChanges()" value="Discard" />
<input type="button" onclick="saveChanges()" value="Save" />

jQuery（文档）.ready（函数（）{
应用绑定（新的MyModel（））；
});
函数MyModel（）{
this.Name=ko.observable（“Bob”）；
}

如果我修改了名称并单击“放弃”，则应恢复原始值（在本例中为Bob），而当我单击“保存”时，应分配新值（例如，此名称（“账单”））

---

有人知道如何解决我的问题吗？

您只需跟踪原始数据即可：

function MyModel() {
    var self = this;
    self.Name = ko.observable("Bob");
    var orgData = ko.toJS(self);
    self.discardChanges = function() {
        // restore MyModel with the original data (requires the mapping plugin)
        ko.mapping.fromJS(orgData, self); 
    };
}

以及：

---

使用下面的ko.extension

var MyModel = function (data) {
    var self = this;

    self.Name= ko.observable('');

    self.Underscore = ko.Underscore(self);

    self.Cancel = function () {
        self.Underscore.Cancel();
    }

    self.Confirm = function () {
        self.Underscore.Confirm();
    }
};

HTML:

---

谢谢你的建议。不幸的是，它不起作用。如您所述，我将原始数据存储在变量中。当我在discardChanges事件期间进入调试器时，存储的值是正确的值。但是我的修改值并没有被重置：-（看看这个问题：你能在新的fiddle中添加到目前为止的代码吗？

var MyModel = function (data) {
    var self = this;

    self.Name= ko.observable('');

    self.Underscore = ko.Underscore(self);

    self.Cancel = function () {
        self.Underscore.Cancel();
    }

    self.Confirm = function () {
        self.Underscore.Confirm();
    }
};

 <input type="button" data-bind="click: Cancel" value="Discard" />
 <input type="button" data-bind="click: Confirm" value="Keep" />

ko.Underscore = function (data) {
    var obj = data;
    var result = {};
    // Underscore Property Check
    var _isOwnProperty = function (isUnderscore, prop) {
        return (isUnderscore == null || prop.startsWith('_') == isUnderscore) && typeof obj[prop] == 'function' && obj.hasOwnProperty(prop) && ko.isObservable(obj[prop]) && !ko.isComputed(obj[prop])
    }
    // Creation of Underscore Properties
    result.init = function () {
        for (var prop in obj) {
            if (_isOwnProperty(null, prop)) {
                var val = obj[prop]();
                var temp = '_' + prop;
                if (obj[prop].isObservableArray)
                    obj[temp] = ko.observableArray(val);
                else
                    obj[temp] = ko.observable(val);
            }
        }
    };
    // Cancel
    result.Cancel = function () {
        for (var prop in obj) {
            if (_isOwnProperty(false, prop)) {
                var val = obj[prop]();
                var p = '_' + prop;
                obj[p](val);
            }
        }
    }
    // Confirm
    result.Confirm = function () {
        for (var prop in obj) {
            if (_isOwnProperty(true, prop)) {
                var val = obj[prop]();
                var p = prop.replace('_', '');
                obj[p](val);
            }
        }
    }
    // Observables
    result.Properties = function () {
        var obs = [];
        for (var prop in obj) {
            if (typeof obj[prop] == 'function' && obj.hasOwnProperty(prop) && ko.isObservable(obj[prop]) && !ko.isComputed(obj[prop])) {
                var val = obj[prop]();
                obs.push({ 'Name': prop, 'Value': val });
            }
        }
        return obs;
    }

    if (obj != null)
        result.init();

    return result;
}