ko.obserable 如果在编辑时选择取消，则忽略更改

Question

我是 KO 的新手。但是，如果我是正确的，model.firstName 会观察到任何更改：

model.firstName = ko.observable(src.firstName)

我的问题是，如果有人在我的 'Edit' 屏幕（模态）上按取消键，我不知道如何恢复到原来的状态，例如：

点击编辑
清除名字字段
点击取消
点击再次编辑
名字字段为空

编辑是 model。我不确定如何重置它？

onCancel: function () {            
            this.show(false);
            // revert back to value provided on load?
            model.firstName(src.firstName);
        },

Answer 1

使用 protectedObservable：

型号：

model.firstName = ko.protectedObservable(src.firstName);
model.save = function() {
   model.firstName.commit();
}
model.cancel = function() {
   model.firstName.reset();
}

HTML:

<input data-bind="value: firstName" />
<button data-bind="click: cancel">Cancel</button>
<button data-bind="click: save">Save</button>

分机：

//wrapper to an observable that requires accept/cancel
ko.protectedObservable = function(initialValue) {
    //private variables
    var _actualValue = ko.observable(initialValue),
        _tempValue = initialValue;

    //computed observable that we will return
    var result = ko.computed({
        //always return the actual value
        read: function() {
           return _actualValue();
        },
        //stored in a temporary spot until commit
        write: function(newValue) {
             _tempValue = newValue;
        }
    }).extend({ notify: "always" });

    //if different, commit temp value
    result.commit = function() {
        if (_tempValue !== _actualValue()) {
             _actualValue(_tempValue);
        }
    };

    //force subscribers to take original
    result.reset = function() {
        _actualValue.valueHasMutated();
        _tempValue = _actualValue();   //reset temp value
    };

    return result;
};

有关更多信息，请阅读这篇文章： KnockMeOut

ko.obserable 如果在编辑时选择取消，则忽略更改

ko.obserable ignore change if cancelled selected on edit

observable

knockout.js