knockout.js - Undo change on cancel button -

i trying cancel changes done during page edit. whenever click on cancel, updated changes reflected. how revert changes on click of cancel button. on helpful since new knockout
https://jsfiddle.net/tan2dgsa/

// viewmodel.js

var viewmodel = {      articles: [{         id: 1,         title: "knockout templating",         content: "content knockout goes here."     }, {         id: 2,         title: "sharepoint 2013 rest api",         content: "content sharepoint."     }, {         id: 3,         title: "knockout sharepoint",         content: "content knockout , 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); 

you ask rather broad question, or fact do:

create rollback functionality on knockoutjs based edit forms

the question behind is: what idiomatic way in knockoutjs? answer is: there none. need write yourself.

the basic idea behind solution same: save copy of original data before editing can revert upon canceling.

here 2 ways that:

1. use library, e.g. ko.editables designed purpose.
2. do yourself. it's not hard: save model behind view model upon initialization, , upon "save", , reuse initialize method on "cancel".

here's sample code 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 try implement 1 of these 2 options own context. if run specific problems, suggest getting specific questions.