JSFiddle - React, Tailwind, and code Playground

by fastfasterfastest

HTML

<script src="http://14designs.com/knockout.debug.modified.2017-05-23.js"></script>
<input data-bind="value: obs">
<p>IsTruthy: <!--ko text:isTruthy--><!--/ko--></p>
<p>Log:</p>
<ul data-bind="foreach: log">
    <li data-bind="text: $data"></li>
</ul>

JavaScript

function ViewModel() {
    var self = this;
    var someObject = { x: 1 };

    self.obs = ko.observable('xxx');
    self.obs.xxx="obs";
    self.isTruthy = ko.pureComputed(function() { console.log("observable[isTruthy].read - returning " + !!self.obs()); return !!self.obs()});
    self.isTruthy.xxx="isTruthy";
    self.objIfTruthy = ko.pureComputed(function() { console.log("observable[objIfTruthy].read - returning " + (self.isTruthy() ? someObject : "null")); return self.isTruthy() ? someObject : null;});
    self.objIfTruthy.xxx="objIfTruthy";
    
    self.log = ko.observableArray();
    self.objIfTruthy.subscribe(function(value) {
        console.log("observable[objIfTruthy].subscribe - 'change' event - new value==" + value + " => pushing to log");
        self.log.push(ko.toJSON(value));
    });
};

ko.options.deferUpdates =true;
ko.applyBindings(new ViewModel());