JSFiddle - React, Tailwind, and code Playground

by ipeshev

HTML

<div id='test' data-bind="with:$root.document">
    <input data-bind="value:$data.test"/>
    <button data-bind="click:$root.check"></button>
    <span data-bind="text:$root.test"></span>
</div>

JavaScript

function Model() {
    var self = this;
    self.document = ko.observable();
    self.check = function(){
        console.log(self.document());
    };
    
    var doc = {
        test: "dddd"
    };
    self.document(doc);
    self.document.subscribe(function(p){
        console.log("changed");
    });
    self.test = ko.observable("ddddddd");
    
    
};
ko.dirtyFlag = function(root) {
    var _isDirty = ko.observable(false);

    var result = ko.computed(function() {
        if (!_isDirty()) {
            console.log(ko.toJS(root));
            ko.toJS(root); //just for subscriptions
        }

        return _isDirty();
    });

    result.subscribe(function() {
        console.log("here");
        if (!_isDirty()) {
            _isDirty(true);
        }
    });

    return result;
};
m = new Model();
setInterval(function(){console.log(ko.dirtyFlag(m.document())())},2000);
ko.applyBindings(m,document.getElementById('test'));