Knockout isdirty custom data binding


This is probably one of my favorite data bindings for Knockout.js: isdirty. The concept behind the function is to track when there is a change to any object including any of its properties. It’s extremely powerful handling nested objects as well.

Let’s take a look at how to use:

var customer = {
“firstName”: ko.observable(“End your”),
“lastName”: ko.observable(“If”)

customer.dirtyFlag = new ko.dirtyFlag(customer);

The above code initializes a customer object with two parameters: first and last name. Both of these properties are defined as observables. When a change happens to either property, the following property on the customer object will return true: customer.dirtyFlag.isDirty()

You can apply logic to this computed observable to identify data on your page has changed.

And finally let’s look at the actual code behind the function:

ko.dirtyFlag = function (root, isInitiallyDirty) {
var result = function () { },
_initialState = ko.observable(ko.toJSON(root)),
_isInitiallyDirty = ko.observable(isInitiallyDirty);

result.isDirty = ko.computed(function () {

return _isInitiallyDirty() || _initialState() !== ko.toJSON(root);


result.reset = function () {




return result;


About the author

By Jamie

My Books