Is Dirty Demo
HTML
<div data-bind="foreach: Fields">
<b data-bind="text: Name"></b>
<!--ko if: Type() == "combo"-->
<select data-bind="options: Options, value: Default"></select> <!--/ko-->
<!--ko if: Type() == "radio"-->
<div data-bind="foreach: Options">
<input type="radio" value="cherry" data-bind="value: $data, checked: $parent.Default" />
<span data-bind="text: $data"></span>
</div>
<!--/ko-->
<!--ko if: Type() == "text"-->
<input type="text" data-bind="value: Default">
<!--/ko-->
<br/>
</div>
JavaScript
var jsonData = [
{
Name: "Gender",
Type: "radio",
Options: ["Male", "Female", "Unknown"],
Default: "Female",
Blankout: "Never"},
{
Name: "Age",
Type: "text",
Options: "None",
Default: 15,
Blankout: "Never"},
{
Name: "Neighbourhood",
Type: "combo",
Options: ["Eastern", "Western", "Northern", "Southern", "Central"],
Default: "Central",
Blankout: "if (Age < 40 or Voted='Obama')"},
{
Name: "Voted",
Type: "combo",
Options: ["Obama", "Romney", "Harry Potter"],
Default: "Harry Potter",
Blankout: "if ((Gender='Female' and Age < 15) or Neighbourhood='Eastern'"}
];
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;
};
function FormField(data) {
var self = this;
self.Name = ko.observable(data.Name);
self.Type = ko.observable(data.Type);
self.Options = ko.observableArray(data.Type != 'text' ? data.Options : []);
self.Default = ko.observable(data.Default);
}
function ViewModel(data) {
var self = this;
self.Fields = ko.observableArray(ko.utils.arrayMap(data, function(item) {
return new FormField(item);
}));
self.dirtyFlag = new ko.dirtyFlag(this);
self.isDirty = ko.computed(function (){
if (self.dirtyFlag.isDirty())
{
alert("Value changed!");
// Do async update.
}
});
}
ko.applyBindings(new ViewModel(jsonData));