JSFiddle - React, Tailwind, and code Playground

by Jeroen Heijmans

HTML

<input type="checkbox" data-bind="checked: isChecked" />
<input type="textbox" data-bind="value: someText" />

<p>Read only values:</p>
<p>
    isChecked = <span data-bind="text: isChecked"></span>
    <br />
    someText = <span data-bind="text: someText"></span>
</p>

JavaScript

var ViewModel = function() {
    var self = this;
    self.isChecked = ko.observable(false);
    
    var privateText = ko.observable("");
    self.someText = ko.computed({
        read: function() { return privateText(); },
        write: function(value) {
            self.isChecked(value !== "");
            
            privateText(value);
        }
    });
}

ko.applyBindings(new ViewModel());