Undo change on cancel button

You ask a rather broad question, or it is fact a To Do:

Create rollback functionality on KnockoutJS based edit forms

The question behind that to do is: what is the idiomatic way to do that in KnockoutJS? The answer is: there is none. You need to write something yourself.

The basic idea behind any solution will be the same: save a copy of the original data from before editing so you can revert to it upon canceling.

Here are two good ways to do that:

  1. Use a library, e.g. ko.editables is designed for exactly this purpose.
  2. Do It Yourself. It's actually not that hard: you save the model behind the view model upon initialization, and upon "save", and reuse the initialize method on "cancel".

Here's some 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 problems, I suggest getting back to SO with specific questions.