JSFiddle - React, Tailwind, and code Playground

by fastfasterfastest

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.4.2.debug.js"></script>
<div>subCondition1: <span data-bind="text: '' + subCondition1() + ' - ' + new Date().valueOf() + '-' + JSON.stringify(undefined)"></span></div>
<div>subCondition2: <span data-bind="text: '' + subCondition2() + ' - ' + new Date().valueOf()"></span></div>
<div>condition: <span data-bind="text: '' + condition() + ' - ' + new Date().valueOf()"></span></div>

<div data-bind="if: condition">
    Condition holds true - <span data-bind="text: new Date().valueOf()"></span></div>
<div data-bind="ifnot: condition">
    Condition does not hold true - <span data-bind="text: new Date().valueOf()"></span></div>

<button data-bind="click: function() { $data.subCondition1(14); }">Set SubCondition1 (14)</button>
<button data-bind="click: function() { $data.subCondition1(true); }">Set SubCondition1 (true)</button>
<button data-bind="click: function() { $data.subCondition1(false); }">Set SubCondition1 (false)</button>
<button data-bind="click: function() { $data.subCondition2('hello'); }">Set SubCondition2 ('hello')</button>
<button data-bind="click: function() { $data.subCondition2('there'); }">Set SubCondition2 ('there')</button>
<button data-bind="click: function() { $data.subCondition2(false); }">Set SubCondition2 (false)</button>

JavaScript

function ViewModel() {
    this.subCondition1 = ko.observable();
    this.subCondition2 = ko.observable();
    this.condition = ko.pureComputed(function () {
        return this.subCondition1() && this.subCondition2();
    }, this);
}
ko.options.deferUpdates = true;
ko.onError = function (error) {
    alert("knockout error\n" + error);
};
ko.applyBindings(new ViewModel());