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

我正在使用ko.js显示场馆表。Knockout 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));

来源

2013-02-09 Cogslave

您需要明确保存更新表中项目的位置：http://jsfiddle.net/JHzQ3/您还应检查以下文章：http://www.knockmeout.net/2013/01 /simple-editor-pattern-knockout-js.html – nemesv 2013-02-10 09:39:50

在他的评论中链接的文章nemesv他回答。

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

来源

2013-02-11 11:54:00 Cogslave

您设置观测淘汰赛这样的：

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

来源

2013-02-09 21:06:16 Martin

这会修复对话框中的绑定，但不修复原始表。当我在对话框中进行编辑时，它也更新了场地表格。我该如何做这项工作？ – Cogslave 2013-02-09 22:11:26

我们有一个小扩展Knockout.js作为一部分进行延伸观测，使他们能够注册有不同的历史堆栈的项目。

也许它可以帮助你。

Knockout-Memento

来源

2014-03-02 13:29:03 user2071276

我查看了这个库，它看起来很酷，但是我在运行这些示例时遇到了一些麻烦。我可以在什么地方与您联系问题吗？ – Val 2014-07-16 22:54:19

您可以考虑使用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>

而且here的一个Plunkr显示在行动了。

来源

2014-12-21 21:08:21 Ziad

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

回答

相关问题