JSFiddle - React, Tailwind, and code Playground

by fastfasterfastest

HTML

<script src="http://bestware.us/knockout/2414-fastfasterfastest-update/knockout-latest.debug.js"></script>
<div><span data-bind="text: '' + new Date().valueOf()"></span></div>

<div>property1: <span data-bind="text: '' + JSON.stringify(property1()) + ' - ' + new Date().valueOf()"></span></div>

<div data-bind="with: property1">
   with property1: <span data-bind="text: '' + a() + ' - ' + new Date().valueOf()"></span>
</div>
<div data-bind="if: property1">
   if property1 (no access): <span data-bind="text: '' + new Date().valueOf()"></span>
</div>
<div data-bind="with: property1">
   with property1 (no access): <span data-bind="text: '' + new Date().valueOf()"></span>
</div>

<div data-bind="using: property1">
   using property1 (no access): <span data-bind="text: '' + new Date().valueOf()"></span>
</div>

<button data-bind="click: function() { $data.property1({a: ko.observable(14)}); }">Set property1({a: ko.observable(14)})</button>
<button data-bind="click: function() { $data.property1({a: ko.observable(property1().a() + 1)}); }">Set property1({a: ko.observable(property1().a() + 1)})</button>
<button data-bind="click: function() { $data.property1().a(property1().a() + 1); }">Set property1().a(property1().a() + 1)</button>

JavaScript

function ViewModel() {
    this.property1 = ko.observable();
    this.property2 = ko.observable();
}
ko.options.deferUpdates = true;
ko.onError = function (error) {
    alert("knockout error\n" + error);
};
ko.applyBindings(new ViewModel());