JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div data-bind="template: {name: 'petsTemplate', foreach: $root.pets}" />

<script type="text/html" id="petsTemplate">
    <div data-bind="template: {'if': $root.selectedPet() === $data, name: 'petTemplate', afterRender:$root.doAfterRender}" />
</script>    

<script type="text/html" id="petTemplate">
    <span>The animal is a </span><span data-bind="text: pet().Name"></span>
    <div>Happy?<input type="checkbox" data-bind="checked: pet().IsHappy" /></div>
</script>

JavaScript

var Animal = function(name) {
    this.Name = ko.observable(name);
    this.IsHappy = ko.observable(false);
},
    
viewModel = {     
    pets: ko.observableArray([
        {pet: ko.observable(new Animal ("Dog"))},
        {pet: ko.observable(new Animal ("Cat"))}
    ]),
    selectedPet: ko.observable(null),
    doAfterRender: function() {
        ko.computed(function() {
         viewModel.selectedPet().pet().IsHappy() ? alert('is happy') : alert('is not happy');  
        }).dispose();
    }
};  

viewModel.selectedPet(viewModel.pets()[0]);
ko.applyBindings(viewModel);