Knockoutjs.com - Templating example

http://knockoutjs.com/examples/templating.html

by ernestohs

HTML

<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/js/knockout-1.2.1.js"></script>
<div class='liveExample'> 
    
    <div data-bind='template: "peopleTemplate"'> </div> 
    <label><input data-bind='checked: showRenderTimes' type='checkbox' /> Show render times</label> 
    
    <script id='peopleTemplate' type='text/html'> 
        <h2>People</h2>
        <ul>
            {{each people}}
            <li>
                <div>
                    ${ name } has <span data-bind='text: children().length'>&nbsp;</span> children:
                    <a href='#' data-bind='click: addChild '>Add child</a>
                    <span class='renderTime' data-bind='visible: showRenderTimes'>
                        (person rendered at <span data-bind='text: new Date().getSeconds()' />)
                    </span>
                </div>
                <div data-bind='template: { name: "childrenTemplate", data: children }' />
            </li>
            {{/each}}
        </ul>
    </script> 
    <script id='childrenTemplate' type='text/html'> 
        <ul>
            {{each $data}}
            <li>
                ${ this }
                <span class='renderTime' data-bind='visible: viewModel.showRenderTimes'>
                    (child rendered at <span data-bind='text: new Date().getSeconds()' />)
                </span>
            </li>
            {{/each}}
        </ul>
    </script> 
    
</div>

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

.renderTime { color: #777; font-style: italic; font-size: 0.8em; }

li { list-style-type: disc; margin-left: 20px; }

JavaScript

// Define a "person" class that tracks its own name and children, and has a method to add a new child
var person = function(name, children) {
    this.name = name;
    this.children = ko.observableArray(children);

    this.addChild = function() {
        this.children.push("New child");
    }.bind(this);
}

// The view model is an abstract description of the state of the UI, but without any knowledge of the UI technology (HTML)
var viewModel = {
    people: [
        new person("Annabelle", ["Arnie", "Anders", "Apple"]),
        new person("Bertie", ["Boutros-Boutros", "Brianna", "Barbie", "Bee-bop"]),
        new person("Charles", ["Cayenne", "Cleopatra"])
        ],
    showRenderTimes: ko.observable(false)
};

ko.applyBindings(viewModel);