Javascript 使用撤销功能将Js绑定到编辑模式

我正在使用ko.js显示一张场地表

每个场馆都有一个“编辑”按钮，可弹出一个显示可编辑数据的对话框

当按下编辑按钮时，我将场地绑定到对话框，并将数据的副本存储在撤消对象中

编辑对话框上的字段时，对话框和表都会更新

取消编辑时，我会将场地绑定到“撤消对象”状态。这会更新对话框，但不会在表上更新

知道我做错了什么吗

这是我的视图模型

VenueViewModel = function(venues) {
    var self = this;

    var venueModal = $("#venueModal");
    this.venues = ko.mapping.fromJS(venues);
    this.venue = ko.observable();
    this.venueUndo = null;

    //Cancel an edit                
    this.cancel = function() {
        self.venue(ko.mapping.fromJS(self.venueUndo));
        venueModal.modal("hide");
    }

    //Edit an existing venue
    this.edit = function(venue) {
        self.venue(venue);
        self.venueUndo = ko.mapping.toJS(venue);
        venueModal.modal("show");
    };

    //Create a new venue
    this.create = function() {
        self.venue(new Venue());
        venueModal.modal("show");
    };
};

ko.applyBindings(new VenueViewModel(venues));

---

您可以这样设置淘汰观测值：

self.venue(ko.mapping.fromJS(self.venueUndo));

---

nemesv在评论中链接的文章就是答案

---

我们对Knockout.js进行了一个小的扩展，作为out项目的一部分，它扩展了可观察对象，以便它们可以注册到不同的历史堆栈中

也许它能帮助你

你可以考虑使用这个。下面是注册viewmodel的示例代码：

VenueViewModel.undoMgr = ko.undoManager(VenueViewModel, {
  levels: 12,
  undoLabel: "Undo (#COUNT#)",
  redoLabel: "Redo"
});

然后，您可以在html中添加撤消/重做按钮，如下所示：

 <div class="row center-block">
    <button class="btn btn-primary" data-bind="
      click: undoMgr.undoCommand.execute, 
      text: undoMgr.undoCommand.name, 
      css: { disabled: !undoMgr.undoCommand.enabled() }">UNDO</button>
    <button class="btn btn-primary" data-bind="
      click: undoMgr.redoCommand.execute, 
      text: undoMgr.redoCommand.name, 
      css: { disabled: !undoMgr.redoCommand.enabled() }">REDO</button>
  </div> 

撤消
重做

---

这是一个Plunkr，显示了它的作用。

这修复了对话框中的绑定，但也修复了原始表中的绑定。当我在对话框中编辑时，它也更新了场馆表。我如何才能做到这一点？在更新表中项目的地方，您需要进行显式保存：您还应该查看本文：我签出了这个库，它看起来很酷，但我在运行示例时遇到了一些问题。有什么问题我可以和你联系吗？