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

Question

我对 KO 很陌生。但是，如果我是正确的，model.firstName 会观察到任何变化：

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

我的问题是，如果有人在我的“编辑”屏幕（模式）上按取消，我不知道如何恢复到原始状态，例如：

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

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

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

Answer 1

使用受保护的Observable：

型号：

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