淘汰赛:通过轻松回滚到以前的值来编辑数据

时间:2012-12-18 01:41:29

标签: javascript knockout.js

关于在Knockout中编辑数据的博客文章和讨论很多。 我遇到的主要问题是,当用户取消编辑操作时(或者当Ajax调用出错时),您需要一种简单的方法将数据恢复为之前的值。

我对我发现的例子不满意:即使编辑非常复杂的模型,我也非常需要一些东西。

2 个答案:

答案 0 :(得分:2)

这是我找到的解决方案,我正在分享它,以便了解比我更专业的人可能存在的缺点,当然还有帮助。

单击“编辑”按钮时,我会创建正在编辑的数据的副本。

编辑按钮(即:在具有foreach绑定的表的每一行上)

<button data-bind="click: editItem">Edit</button>

来自我的ViewModel:

this.selectedItem = ko.observable();
this.selectedItemCache = ko.observable();
this.editItem = function (item) {
    self.selectedItem (item);
    self.selectedItemCache (ko.mapping.toJS(item)); // ko.mapping.toJS "detach" my item from the view model
}

当用户点击“取消”按钮或用于更新服务器的AJAX调用失败时,我将使用以下标题复制“缓存”可观察数据:

this.cancelEditItem = function () {
    for (var prop in self.selectedItem) {
        if (typeof self.selectedItem[prop] === 'function') {
            self.selectedItem[prop](self.selectedItemCache()[prop]);
        }
    }
}

答案 1 :(得分:1)

我同意Nicola的答案,因为这种方法是最受欢迎的方法。

我已经使用了这个http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html,这是一种相当精确的方法。它在我的应用程序中运行良好。