Knockout isdirty custom data binding

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 () {
_initialState(ko.toJSON(root));
_isInitiallyDirty(false);
};
return result;
};

Published on May 31, 2022

Tags: Knockout js Tutorial | JavaScript | isdirty | Knockout js Tutorial