JSFiddle - React, Tailwind, and code Playground

by smacky311

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
Name: <input type="text" data-bind="value: name, valueUpdate: 'afterkeydown'" />
<input type="checkbox" data-bind="checked: nameVisible"/>
<p>
    Hello, <span data-bind="text: name, visible: nameVisible"></span>
    <br/>
    <span data-bind="text: displayName"></span>
</p>
<button data-bind="click: changeName">Change Name</button>

JavaScript

$(function() {
    var viewModel = {
        name: ko.observable("bob"),
        changeName: function() {
            this.name("steve");
        },
        nameVisible: ko.observable(true)
    };
   
    viewModel.displayName = ko.computed(function() {
        return this.name() + " is" + (!this.nameVisible() ? " not" : "") + " visible.";
    }, viewModel);
    ko.applyBindings(viewModel);
});