Question

我正在尝试将敲除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;
};

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

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

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

Answer 2

鉴于HTML类似于：

<div>
    <button data-bind="click: function() { undo(); }">Undo</button>
    <input data-bind="value: firstName" />
    <input data-bind="value: lastName" />
    <textarea data-bind="value: text"></textarea>
</div>

您可以使用类似于此的一些Knockout代码，基本上将撤消堆栈保存为每次更改后的状态的JSON字符串表示形式。基本上，您创建一个伪的依赖observable来订阅视图中的所有属性，或者您也可以手动迭代并订阅每个属性。

//current state would probably come from the server, hard coded here for example
var currentState = JSON.stringify({
    firstName: 'Paul',
    lastName: 'Tyng',
    text: 'Text' 
})
   , undoStack = [] //this represents all the previous states of the data in JSON format
    , performingUndo = false //flag indicating in the middle of an undo, to skip pushing to undoStack when resetting properties
    , viewModel = ko.mapping.fromJSON(currentState); //enriching of state with observables


//this creates a dependent observable subscribed to all observables 
//in the view (toJS is just a shorthand to traverse all the properties)
//the dependent observable is then subscribed to for pushing state history
ko.dependentObservable(function() {
    ko.toJS(viewModel); //subscribe to all properties    
}, viewModel).subscribe(function() {
    if(!performingUndo) {
    undoStack.push(currentState);
    currentState = ko.mapping.toJSON(viewModel);
}
});

//pops state history from undoStack, if its the first entry, just retrieve it
    window.undo = function() {
        performingUndo = true;
        if(undoStack.length > 1)
        {
            currentState = undoStack.pop();
            ko.mapping.fromJSON(currentState, {}, viewModel);
        }
        else {
            currentState = undoStack[0];
            ko.mapping.fromJSON(undoStack[0], {}, viewModel);
        }
        performingUndo = false;
};

ko.applyBindings(viewModel);

我在这里有一个带有淘汰赛的N级撤消样本：

http://jsfiddle.net/paultyng/TmvCs/22/

您可以根据自己的需要进行调整。

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

2 个答案: