Knockout reverting changes

Question

I have a selectedCustomer(customer) observable where customer has 3 properties: Fname,LName,Age.

I data-bind those 3 properties to three text inputs and allow the user to edit them. How do I cancel the changes and revert those three properties back to their original state?

I was able to make a clone of it using:

var custCache = ko.observable(ko.mapping.toJS(customer));

I don't want to do manual mapping like below as this can get troublesome when your object has a lot of properites and arrays of other objects.

selectedCustomer().Fname = custCache().Fname;
selectedCustomer().Lname = custCache().Lname;
selectedCustomer().Age= custCache().Age;

So how do I put the values back to customer object when the user cancel the changes? How do I loop those properties and copy them over?

Thanks, Kevin

Remy D'Agostino Remy D'Agostino · Accepted Answer · 2014-03-02T05:23:56

Ryan Niemeyer has written about this topic here

However another common approach is to create a knockout extender.

It goes something like this:

ko.extenders.revertable = function(obs, option) {
  // Change this if you want to use something other than _.clone
  // as your clone function
  var cloneFn = _.clone;

  obs.originalValue = cloneFn(obs());
  obs.silentUpdate = ko.observable(false);
  obs.isDirty = ko.observable(false);

  obs.revert = function() {
    obs.silentUpdate(true);
    obs(cloneFn(obs.originalValue));
    obs.silentUpdate(false);
    obs.isDirty(false);
  };

  obs.update = function(value) {
    obs.silentUpdate(true);

    if (_.size(arguments) > 0) {
      obs(value);
    }

    obs.originalValue = cloneFn(obs());
    obs.silentUpdate(false);
    obs.isDirty(false);
  };

  obs.subscribe(function(newValue) {
    if (!ko.unwrap(obs.silentUpdate)) {
      obs.isDirty(true);
    }
  });

  return obs;
}

I used underscore in my example but you can customize it if you're not using underscore in your project.

Use it like this:

var myValue = ko.observable('original');
myValue = myValue.extend({ revertable: {} });

myValue('updated');
myValue.revert();

console.log(myValue()); // logs 'original'

Knockout reverting changes

2 Answers