4

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

4 回答 4

1

您可以考虑为此使用KO-UndoManager。这是注册视图模型的示例代码：

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展示它的实际应用。

于 2014-12-21T21:08:21.770 回答
1

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

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

于 2013-02-11T11:54:00.140 回答
0

你像这样设置 Knockout observables：

self.venue(ko.mapping.fromJS(self.venueUndo));
于 2013-02-09T21:06:16.540 回答
0

我们对 Knockout.js 做了一个小扩展，作为扩展 observables 的项目的一部分，因此它们可以注册到不同的历史堆栈。

也许它可以帮助你。

淘汰赛纪念品

于 2014-03-02T13:29:03.037 回答