JSFiddle - React, Tailwind, and code Playground

by rniemeyer

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<select type="select" data-bind="value: Filter.Type1">
     <option value="1">Option1</option>
     <option value="2">Option2</option>
     <option value="3">Option3</option>
</select>

<br/><br/>
<span data-bind="text: Filter.Type1"></span><br/>
<span data-bind="text: DirtyFlag.isDirty"></span><br/>

JavaScript

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

    result.isDirty = ko.dependentObservable(function () {
        return _initialState() !== ko.toJSON(root);
    });

    result.reset = function () {
        _initialState(ko.toJSON(root));
    };

    return result;
};


var Model = {
    Filter: {
        SearchTerm: ko.observable(''),
        Type1 : ko.observable('1')
    },
    // more ui-specific properties
};

Model.DirtyFlag = new ko.dirtyFlag(Model.Filter)

// Subscribe to change event
Model.DirtyFlag.isDirty.subscribe(function () { alert('Filter Changed'); });


ko.applyBindings(Model);