javascript - 如何使用撤消创建可观察数组？

Question

我正在尝试将 knockout JS 添加到我们网站的搜索页面。目前您打开了一个 jQuery 对话框，其中有许多您可以选择的标准复选框。

有多个对话框具有多种类型的标准。当您打开对话框时，复选框不会生效，直到您点击“更新”按钮，如果您单击取消或只是关闭窗口，您所做的更改将被还原并且对话框将设置为之前的状态。

我读了this和其他一些帖子。然而，这似乎只适用于 ko.observable，我似乎无法让它与 ko.observableArray 一起工作。

有没有人完成过这个或者有什么想法？

我想做的一个例子:

HTML:

<form>
    <div>
        <div>
            <label><input type="checkbox" data-bind="checked: genders" value="1" />Male</label>
            <label><input type="checkbox" data-bind="checked: genders" value="2" />Female</label>
        </div>
    </div>
    <a id="buttonCancel">Cancel</a>
    <a id="buttonUpdate">Update</a>
</form>
<div data-bind="text: ko.toJSON(viewModel)"></div>

Javascript:

var viewModel = {
    genders: ko.observableArrayWithUndo([])
};

ko.applyBindings(viewModel);

$('#buttonCancel').click(function(){
   viewModel.genders.resetChange();
});

$('#buttonUpdate').click(function(){
    viewModel.genders.commit();
    return false;
});

Answer 1

这是一种处理方法:

//wrapper to an observableArray of primitive types that has commit/reset
ko.observableArrayWithUndo = function(initialArray) {
    var _tempValue = ko.observableArray(initialArray.slice(0)), 
        result = ko.observableArray(initialArray);

    //expose temp value for binding
    result.temp = _tempValue;

    //commit temp value
    result.commit = function() {
        result(_tempValue.slice(0));
    };

    //reset temp value
    result.reset = function() {
        _tempValue(result.slice(0)); 
    };

    return result;
};

您可以将复选框绑定(bind)到 yourName.temp，并将 UI 的其他部分绑定(bind)到 yourName。

这是一个示例:http://jsfiddle.net/rniemeyer/YrfyW/

slice(0) 是获取数组浅拷贝的一种方法(甚至只是 slice())。否则，您将对同一数组的引用执行操作。