Discard change on cancel button

Question

I am trying to undo changes made while editing my page. But whenever I click Cancel, the updated changes are updated. How to revert changes when you click cancel. Any help on this would be really helpful since I'm new to knockout
https://jsfiddle.net/tan2dgsa/

//ViewModel.js

var viewModel = { articles: [{ id: 1, title: "KnockOut Templating", content: "Content for Knockout goes here." }, { id: 2, title: "SharePoint 2013 REST API", content: "Content for SharePoint." }, { id: 3, title: "Knockout with SharePoint", content: "Content for knockout and SharePoint." }], selectedTemplate: ko.observable("readOnly"), selectedMode: ko.observable(), }; viewModel.currentTemplate = function (tbl) { return tbl === this.selectedMode() ? 'editMode' : this.selectedTemplate(); }.bind(viewModel); viewModel.reset = function (t) { this.selectedMode("editMode"); }; ko.applyBindings(viewModel); 

Answer 1

You ask a rather broad question, or is it a fact that needs to be done:

Create a rollback function in editing forms based on KnockoutJS

The question behind this is this: what is the idiomatic way to do this in KnockoutJS? The answer is no. You need to write something.

The basic idea of ​​any solution will be the same: save a copy of the source data before editing so that you can return to it after cancellation.

Here are two good ways to do this:

• Use a library, for example. ko.editables is designed specifically for this purpose.
• Do it yourself. Actually, it’s not so difficult: you save the model after the viewing model during initialization, and then “save” and reuse the initialization method when “canceling”.

Here is a sample code for the latter:

 var dummyItem = { id: 42, name: "John doe" }; function ItemViewModel(data) { var self = this, currentDto = data; self.id = ko.observable(); self.name = ko.observable(); self.isInEditMode = ko.observable(false); self.reset = function() { self.id(currentDto.id); self.name(currentDto.name); self.isInEditMode(false); }; self.saveState = function() { currentDto = { id: self.id(), name: self.name() }; self.isInEditMode(false); }; self.reset(); } function RootViewModel() { var self = this; self.items = ko.observableArray([new ItemViewModel(dummyItem)]); self.startEdit = function(item) { item.isInEditMode(true); }; self.save = function(item) { item.saveState(); }; self.cancel = function(item) { item.reset(); }; } ko.applyBindings(new RootViewModel()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <ul data-bind="foreach: items"> <li> <span data-bind="text: id"></span> <span data-bind="text: name"></span> <input data-bind="textInput: name, visible: isInEditMode"> <button data-bind="visible: !isInEditMode(), click: $root.startEdit">edit</button> <button data-bind="visible: isInEditMode, click: $root.save">save</button> <button data-bind="visible: isInEditMode, click: $root.cancel">cancel</button> </li> </ul> 

You should probably try to implement one of these two options for your own context. If you run into specific issues, I suggest going back to SO with specific questions.