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

Consider using Knockout-Validation plug-in

It implements the following:

yourProperty.isModified() - Checks if the user modified the value.

yourProperty.originalValue - So you can check if the value really changed.

Along with other validation stuff which comes in handy!

Cheers

Answer 2

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 3

I've adapted @Brett Green code and extended it so that we can have AcceptChanges, marking the model as not dirty plus having a nicer way of marking models as trackables. Here is the code:

var viewModel = {
    name: ko.observable()   
};

ko.track(viewModel);

http://jsfiddle.net/david_freire/3HZEu/2/