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綁定到具有撤消功能的編輯模式

回答

相關問題