3

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

我对找到的示例并不满意:即使在编辑非常复杂的模型时,我也需要一些非常简单的东西。

4

3 回答 3

2

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

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

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

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

从我的视图模型:

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]);
        }
    }
}
于 2012-12-18T01:41:29.470 回答
1

Ryan Niemeyer 的“Getting the Most Out of Knockout.js”截屏视频包含了一个很好的方法(以及许多其他有用的技巧)——我建议你去看看。

http://vimeo.com/51103092

他谈到在大约 16:30 恢复。

于 2012-12-18T22:56:05.470 回答
1

我同意 Nicola 的回答,因为这种方法是最流行的方法。

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

于 2012-12-18T02:06:16.323 回答