JSFiddle - React, Tailwind, and code Playground

by Mohammed Ismail Ansari

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div id="display-div">
    <span><b>My name: </b></span>
    <input type="text" data-bind="value: name"></input>
    <br />
    <span><b>My age: </b></span>
    <input type="text" data-bind="value: age"></input>
</div>
<br />

<div id="output-div">
    
</div>

CSS

body
{
    font-family: Arial;
}

#output-div
{
    color: Green;
}

JavaScript

// Subscribing to Knockout observables

// Writes the provided text onto the screen
function writeLine(someText) {
    $("#output-div").append(someText + "<br />");
}

// Our viewmodel with observables
function viewmodel() {
    self = this;
    
    this.name = ko.observable("David Anderson");
    this.age = ko.observable(50);
}

// Runs at document load
$(document).ready(function(){
    // Create an instance of the viewmodel
    var myViewmodel = new viewmodel();
    
    // Bind the instance to the view
    ko.applyBindings(myViewmodel);
    
    // Subscribe to the changes
    myViewmodel.age.subscribe(function(value) {
        writeLine("Age has changed to " + value) ;
    });
});