KO Data Binding and Templates Example

KO Data Binding and Templates Example

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.js"></script>
<h3>Simple Div Template</h3>
<div data-bind="template: {name: 'sampleTemplate1'}"></div>
<hr/>

<h3>Simple Script Template</h3>
<div data-bind="template: {name: 'sampleTemplate2'}"></div>
<hr/>

<h3>template with foreach binding</h3>
<table>
    <tbody data-bind="template : {name: 'st3', foreach:countries}"></tbody>
</table>
<hr/>

<h3>template with if binding</h3>
<input type="checkbox" data-bind="checked:showCountries"/> Show Countries
<table data-bind="if: showCountries">
    <tbody data-bind="template : {name: 'st3', foreach:countries}"></tbody>
</table>
<hr/>

<h3>template with 'with' binding</h3>
<div data-bind="with:player">
    <span data-bind="text:lastName"></span> ,
    <span data-bind="text:firstName"></span>
</div>
<hr/>

<h3>binding data context</h3>
<div data-bind="with:player">
    <span data-bind="text:lastName"></span> ,
    <span data-bind="text:firstName"></span><br/>
    Access parent's property (showCountries) using $parent : <span data-bind="text:$parent.showCountries"></span><br/>
    Access root's property (showCountries) using $root (root is the viewmodel) : <span data-bind="text:$root.showCountries"></span><br/>
</div>
<hr/>

<h3>inline templates</h3>
<div data-bind="foreach: countries">
    <span data-bind="text:name"></span>
</div>
<hr/>

<h3>dynamic template selection</h3>
<input type="checkbox" data-bind="checked:showDetails"/> Show Details <br/>
<div data-bind="template: {name:selectTemplate}"></div>
<hr/>

<h3>template parameters</h3>
<span data-bind="text:status"></span><br/>
<button data-bind="click:addItem">Add Item</button> <button data-bind="click:removeItem">Remove Item</button><br/>
<ul data-bind="template: {foreach:items, afterRender:afterRenderMeth, afterAdd:afterAddMeth}">
    <li><span data-bind="text:name"></span></li>
</ul> 
<hr/>

<div id="sampleTemplate1" style="display: none">
    <span>sample template text</span><br/>
    <span>some...

JavaScript

$(document).ready(function() {
    var viewModel = function() {
        var description = "my view model";
        var showCountries = ko.observable(false);
        var player = {
            firstName: "Sachin",
            lastName: "Tendulkar"
        };
        var countries = [{
            key: "IND",
            name: "India"},
        {
            key: "USA",
            name: "United States"},
        {
            key: "AUS",
            name: "Australia"},
        {
            key: "UK",
            name: "United Kingdom"}];

        var summary = ko.observable("summary");
        var details = ko.observable("These are the details.");
        var showDetails = ko.observable(false);
        var selectTemplate = function() {
            return showDetails() ? "detailsTemplate" : "summaryTemplate";
        };

        var items = ko.observableArray([{
            name: "item1"},
        {
            name: "item2"},
        {
            name: "item3"}]);
        var afterRenderMeth = function() {
            //var str = status() ? status().toString(): "" ;
            status("after render");
        };
        var afterAddMeth = function() {
            //var str = status() ? status().toString() : "";
            status("After Add");
        };
        var addItem = function() {
            items.push({
                name: "itemx"
            });
        };
        var removeItem = function() {
            items.pop();
        };
        var status = ko.observable();

        return {
            countries: countries,
            showCountries: showCountries,
            player: player,
            description: description,
            summary: summary,
            details: details,
            selectTemplate: selectTemplate,
            showDetails: showDetails,
            items: items,
            addItem: addItem,
            removeItem: removeItem,
            status: status,
            afterRenderMeth: afterRenderMeth,
           ...