JSFiddle - React, Tailwind, and code Playground

by rasikasampath

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.js"></script>
Name: <input type="text" data-bind="value:name, valueUpdate:afterkeydown" />
<p> Hello, <span data-bind="text:name"></span>
</p>

<button data-bind="click:changeName" >Change name </button>

JavaScript

$(function(){
    
    //if we use this model, when we change the name and click 
    //on the button it won't change the textbox. The reason is
    //name is just a string and it doesnt know about its dependencies.
    //so make the name a function
   // var viewModal = {
   //    name: "Rasika",
   //     changeName: function(){
   //         this.name = "sampath";
   //     }
   // };

     var viewModal = {
        name: ko.observable("Rasika"),
        changeName: function(){
            this.name("sampath");
        }
    };
    
    ko.applyBindings(viewModal);
});