如何使用undo创建可观察数组？

Question

我正在尝试将淘汰JS添加到我们网站上的搜索页面.目前,您打开了一个jQuery对话框,其中包含许多可以选择的条件复选框.

有多个对话框,有多种类型的标准.当您打开对话框时,复选框只有在您点击"更新"按钮后才会生效,如果您单击取消或只是关闭窗口,您所做的更改将被还原,对话框将设置为其以前的状态.

我读了这个和其他一些帖子.然而,这似乎只能使用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;
};

您可以将复选框绑定到yourName.temp,将UI的其他部分绑定到yourName.

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

slice(0)是获取数组的浅表副本(甚至只是slice())的一种方法.否则,您将对同一阵列的引用执行操作.