JSFiddle - React, Tailwind, and code Playground

by manoj

HTML

<div data-bind="with:vm">
    <p type="text" data-bind="text: someValue"></p>
    <button data-bind="click: incr">increment</button>
    <button data-bind="click: decr">decrement</button>
    <p>number greater than 5?</p>
    <ul data-bind="foreach: changeNotifications">
        <li data-bind="text: val"></li>
    </ul>
        
</div>

JavaScript

// changeNotifications
var test = function(){
    var self = this, c;
    self.someValue = ko.observable(6);
    self.incr = function(){
        self.someValue(self.someValue() + 1);
    };
    self.decr = function(){
        self.someValue(self.someValue() - 1);
    };
    self.changeNotifications = ko.observableArray([]);
    self.computedAction = ko.computed(function(){
        return self.someValue() > 5;
    })
    .extend({notify: "always", throttle: 100})
    .extend({notify: "always"})
    .subscribe(function(v){
        self.changeNotifications.push({ val: v });
    });
}
window.vm = new test();
ko.applyBindings(window.vm);