Detecting change to Knockout view model

Question

Sure this is a very easy question to answer but is there an easy way to determine if any property of a knockout view model has changed?

Answer 1

Use extenders:

ko.extenders.trackChange = function (target, track) {     if (track) {         target.isDirty = ko.observable(false);         target.originalValue = target();         target.setOriginalValue = function(startingValue) {             target.originalValue = startingValue;          };         target.subscribe(function (newValue) {             // use != not !== so numbers will equate naturally             target.isDirty(newValue != target.originalValue);         });     }     return target; }; 

Then:

self.MyProperty= ko.observable("Property Value").extend({ trackChange: true }); 

Now you can inspect like this:

self.MyProperty.isDirty() 

You can also write some generic viewModel traversing to see if anything's changed:

self.isDirty = ko.computed(function () {     for (key in self) {         if (self.hasOwnProperty(key) && ko.isObservable(self[key]) && typeof self[key].isDirty === 'function' && self[key].isDirty()) {             return true;         }     } }); 

... and then just check at the viewModel level

self.isDirty() 

Answer 2

You can subscribe to the properties that you want to monitor:

myViewModel.personName.subscribe(function(newValue) {     alert("The person's new name is " + newValue);  }); 

This will alert when personName changes.

Ok, so you want to know when anything changes in your model...

var viewModel = … // define your viewModel  var changeLog = new Array();    function catchChanges(property, value){     changeLog.push({property: property, value: value});     viewModel.isDirty = true; }  function initialiseViewModel() {     // loop through all the properties in the model     for (var property in viewModel) {          if (viewModel.hasOwnProperty(property)) {               // if they're observable             if(viewModel[property].subscribe){                  // subscribe to changes                 viewModel[property].subscribe(function(value) {                     catchChanges(property, value);                 });             }         }     }     viewModel.isDirty = false; }  function resetViewModel() {     changeLog = new Array();       viewModel.isDirty = false; } 

(haven't tested it - but you should get the idea)