Question

我正在使用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));

Answer 1

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

http://www.knockmeout.net/2013/01/simple-editor-pattern-knockout-js.html

Answer 2

您可以考虑使用KO-UndoManager。以下是注册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>

而here是一个普朗克在行动中展示它。

Answer 3

你可以像这样设置Knockout observable：

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

Answer 4

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

也许它可以帮到你。

Knockout-Memento

Knockout Js绑定到具有撤消功能的编辑模式

4 个答案: