JSFiddle - React, Tailwind, and code Playground

by santoshpatro

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
Name: <input type="text" data-bind="value: name,valueUpdate:'afterkeydown'"/>
<input type="checkbox" data-bind="checked:nameVisisble"/>
<p>
    Hello, <span data-bind="text:name,visible:nameVisisble"></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");
        },
        nameVisisble:ko.observable(true)
    };
    viewModel.displayName = ko.computed(function(){
        return this.name() + " is " + (!this.nameVisisble() ? " not " : 
                                       "") + "visible.";
    },viewModel);
    ko.applyBindings(viewModel);
});