撤消取消按钮上的更改答案

【问题标题】：Undo change on cancel button撤消取消按钮上的更改
【发布时间】：2016-09-22 13:00:33
【问题描述】：

我正在尝试取消在我的页面编辑期间所做的更改。但是每当我单击取消时，都会反映更新的更改。如何在单击取消按钮时还原更改。由于我是淘汰赛新手，因此对此的任何帮助都会非常有帮助
https://jsfiddle.net/tan2dgsa/

// ViewModel.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 knockout-mvc knockout-3.0

【解决方案1】：

你问了一个相当广泛的问题，或者这是一个待办事项：

在基于 KnockoutJS 的编辑表单上创建回滚功能

这样做背后的问题是：在 KnockoutJS 中这样做的惯用方式是什么？答案是：没有。你需要自己写一些东西。

任何解决方案背后的基本理念都是相同的：在编辑之前保存原始数据的副本，以便在取消时恢复到它。

这里有两种很好的方法：

使用库，例如ko.editables 正是为此目的而设计的。
自己动手。实际上并不难：在初始化时和“保存”时将模型保存在视图模型后面，并在“取消”时重用初始化方法。

这是后者的一些示例代码：

var dummyItem = { id: 42, name: "John doe" };

function ItemViewModel(data) {
  var self = this, currentDto = data;
  
  self.id = ko.observable();
  self.name = ko.observable();
  
  self.isInEditMode = ko.observable(false);
  
  self.reset = function() {
    self.id(currentDto.id);
    self.name(currentDto.name);
    self.isInEditMode(false);
  };
  
  self.saveState = function() {
    currentDto = {
      id: self.id(),
      name: self.name()
    };
    self.isInEditMode(false);
  };
  
  self.reset();
}

function RootViewModel() {
   var self = this;
   self.items = ko.observableArray([new ItemViewModel(dummyItem)]);
   
   self.startEdit = function(item) { item.isInEditMode(true); };
   self.save = function(item) { item.saveState(); };
   self.cancel = function(item) { item.reset(); };
}

ko.applyBindings(new RootViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<ul data-bind="foreach: items">
  <li>
    <span data-bind="text: id"></span>
    <span data-bind="text: name"></span>
    <input data-bind="textInput: name, visible: isInEditMode">
    <button data-bind="visible: !isInEditMode(), click: $root.startEdit">edit</button>
    <button data-bind="visible: isInEditMode, click: $root.save">save</button>
    <button data-bind="visible: isInEditMode, click: $root.cancel">cancel</button>
  </li>
</ul>

您可能应该尝试为您自己的上下文实现这两个选项之一。如果您遇到具体问题，我建议您带着具体问题回到 SO。

【讨论】：

【解决方案2】：

如果您使用的是 KO Mapping 插件，这将非常简单。

将参数'data'保存在另一个局部变量中，比如'originalData'，然后简单地调用映射插件的函数来重新映射数据。

例如，

    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 了解更多详情。

【讨论】：