JSFiddle - React, Tailwind, and code Playground

by unklefolk

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<p>The animal's name is <input data-bind="value: pet().Name" /></p>
<p>I am a <span data-bind="text: pet().Type" /></p>
<!-- ko if: pet().Type() === 'Dog' -->
    Likes chasing balls 
    <input type="checkbox" data-bind="value: pet().LikesChasingBalls"  />
<!-- /ko -->
<!-- ko if: pet().Type() === 'Cat' -->
    Likes milk 
    <input type="checkbox" data-bind="value: pet().LikesMilk"  />
<!-- /ko -->
<br />
<input value="Change to cat" data-bind="click: changeToCat" type="button"/>

JavaScript

var Animal = function(name) {
    this.Name = ko.observable(name);
    this.Type = ko.observable();
},
    
    Dog = function(name, likesChasingBalls ) {
        var that = new Animal(name);
        that.Type("Dog");            
        that.LikesChasingBalls = ko.observable(likesChasingBalls );
        return that;
    },
        
   Cat = function(name, likesMilk) {
        var that = new Animal(name);
        that.Type("Cat");
        that.LikesMilk = ko.observable(likesMilk);
        return that;
    }, 
    
    viewModel = {     
        pet: ko.observable(new Dog("Rover", false)),
        changeToCat: function() {
             viewModel.pet(new Cat(viewModel.pet().Name(), true));                    
        }
    };  

ko.applyBindings(viewModel);