knockout.js 按“取消”按钮撤消更改

t40tm48m 于 2022-11-10 发布在其他

关注(0)|答案(2)|浏览(119)

我正在尝试取消在我的页面编辑期间所做的更改。但是每当我点击取消时，更新的更改就会反映出来。如何在点击取消按钮时还原更改。任何关于这方面的帮助都将非常有帮助，因为我是一个新的击倒
https://jsfiddle.net/tan2dgsa/
//查看模型. js

var viewModel = {

    articles: [{
        id: 1,
        title: "KnockOut Templating",
        content: "Content for Knockout goes here."
    }, {
        id: 2,
        title: "SharePoint 2013 REST API",
        content: "Content for SharePoint."
    }, {
        id: 3,
        title: "Knockout with SharePoint",
        content: "Content for knockout and SharePoint."
    }],

    selectedTemplate: ko.observable("readOnly"),
    selectedMode: ko.observable(),    
};

viewModel.currentTemplate = function (tbl) {
    return tbl === this.selectedMode() ? 'editMode' : this.selectedTemplate();
}.bind(viewModel);

viewModel.reset = function (t) {
    this.selectedMode("editMode");
};
ko.applyBindings(viewModel);

knockout.js

来源：https://stackoverflow.com/questions/37428397/undo-change-on-cancel-button

2条答案

按热度按时间

htrmnn0y1#

你问了一个相当宽泛的问题，或者它实际上是一个待办事项：
在基于KnockoutJS的编辑表单上创建回滚功能
这背后要做的问题是：* 在KnockoutJS* 中，惯用的方法是什么？答案是：没有。2你需要自己写点东西。
任何解决方案背后的基本思想都是相同的：在编辑之前保存原始数据的副本，以便在取消时可以恢复到原始数据。
以下是两种很好的方法：
1.使用库，例如ko.editables就是为此目的而设计的。
1.自己动手。其实并不难：在初始化和“保存”时将模型保存在视图模型之后，并在“取消”时重用initialize方法。
下面是后者的一些示例代码：
第一个
您可能应该尝试在自己的环境中实现这两个选项中的一个。如果您遇到具体的问题，我建议带着具体的问题回到SO。

赞(0）回复(0）举报 2022-11-10

5m1hhzi42#

如果你使用KOMap插件，这将是相当简单的。
将参数'data'保存在另一个局部变量中，例如'originalData'，然后简单地调用Map插件函数来重新Map数据。
例如：

var myKOViewModel = function(data) {
        var self = this;
        var originalData = data;
        ko.mapping.fromJS(data, null, self);    // ViewModel initial mapping

        //....

        self.CancelClicked = function () {
            ko.mapping.fromJS(originalData, null, self);        // Refresh ViewModel
        }
    }

有关详细信息，请参阅KO的文档https://knockoutjs.com/documentation/plugins-mapping.html。

赞(0）回复(0）举报 2022-11-10