JSFiddle - React, Tailwind, and code Playground

by shenoyvnm

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.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>
    <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);
    });