JSFiddle - React, Tailwind, and code Playground

by consultcory

HTML

<label>One:
    <input type="text" data-bind="value: observableOne, valueUpdate: 'keyup'" />
</label>

<label>Two:
    <input type="text" data-bind="value: observableTwo, valueUpdate: 'keyup'" />
</label>

<div data-bind="visible: dirtyFlag.isDirty"><p>You dirty rascal!</p></div>

JavaScript

ko.dirtyFlag = function (root, isInitiallyDirty) {
    
    var result = function () { },
        _initialState = ko.observable(ko.toJSON(root)),
        _isInitiallyDirty = ko.observable(isInitiallyDirty || false);
    
    result.isDirty = ko.computed(function () {
        return _isInitiallyDirty() || _initialState() !== ko.toJSON(root);
    });
    
    result.reset = function () {
        _initialState(ko.toJSON(root));
        _isInitiallyDirty(false);
    };
    
    return result;
};

var testModel = function() {
  
    var self = this;
    
    self.observableOne = ko.observable('initial value');
    self.observableTwo = ko.observable('initial value');
    
    // Must be last
    self.dirtyFlag = new ko.dirtyFlag(self);
};

ko.applyBindings(new testModel());