Question

我正在使用knockout通过JSON获取和接收对象。我有一个表单，用于显示和编辑绑定到Javascript类的值。我的表单有一个保存和丢弃我的价值的选项。问题是，如果我输入一个观察属性的值并单击丢弃，则值不会传输到Web服务，而是以我的“显示形式”保存，但我不想要。如果我点击放弃，将再次显示原始值。是否可以在按钮点击事件上执行我的值更新（例如，点击“保存”）？这是我当前代码的片段：

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" />

如果我修改了名称并单击Discard，则应恢复原始值（在本例中为Bob），而当我单击Save时，应分配新值（例如this.Name（“Bill”））。

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

Answer 1

您可以简单地跟踪原始数据：

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); 
    };
}

和

<input type="button" data-bind="click: discardChanges" value="Discard" />

Answer 2

使用

下的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：

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

这个敲除扩展，它创建了每个observable的下划线版本，即self.Name（） - ＆gt; self._Name（）

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;
}

按钮单击时绑定可观察值

2 个答案: