Js knockout bound to editable modal with undo function

Question

I use ko.js to display a table of places.

In each place there is an edit button, which displays a dialog box with editable data.

When I click the edit button, I snap the meeting point to the dialog box and save a copy of the data in the cancellation object.

When I edit the fields in the dialog, both the dialog and the table are updated.

When I cancel editing, I bind the venue to the state of the cancel objects. This updates the dialog box, but it does not update in the table.

Any idea what I'm doing wrong here?

Here is my model.

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

The nemesv article related in his comment was the answer.

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

Answer 2

You can use KO-UndoManager for this . Here is an example code for registering your view model:

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

Then you can add the cancel / redo buttons to your html like this:

  <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> 

And here is a Plunkr showing him in action.

Answer 3

You set observed knockouts as follows:

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

Answer 4

We have a small extension for the Knockout.js project as part of a project that extends observable data so that it can be recorded in different piles of history.

Maybe this can help you.

Knockout-memento