KnockoutJS with jQuery.tmpl

by mickeyvip

HTML

<script src=" https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<h2>KnockoutJS with jQuery.tmpl</h2>
<button id="getDataCommand" data-bind="click: getData">Get Data</button>
<div class="container" data-bind='template: {name: "termSelectionTemplate", data: term}'>1</div>

<script type="text/html" id="termSelectionTemplate"> 
    {{each $data}} 
    <div class="term">
        <p><em>Year:</em> ${year}</p>
        <p><em>Name:</em> ${name}</p>
        <p><em>Key:</em> ${key.id}</p>
    </div> 
    {{/each}} 
</script>

CSS

body {
    font-family: Georgia, serif;
    font-size: 0.9em;
}
h2 {
    font-size: 1.2em;
    border-bottom: 1px dotted #999;
    margin-bottom: 15px;
    font-weight: bold;
}

div.term{
    border: 1px solid #ccc;
    padding: 7px;
    margin-bottom: 5px;
}

div.term p {
    line-height: 1.5em;
}

div.term em {
    font-weight: bold;
    display: inline-block;
    width: 60px;
}

JavaScript

var serverResult1 = [
    {
    name: "name_1",
    year: 2011,
    key: {
        id: "id_of_the_key_1",
        name: "name_of_the_key_1"
    }},
{
    name: "name_2",
    year: 2010,
    key: {
        id: "id_of_the_key_2",
        name: "name_of_the_key_2"
    }},
{
    name: "name_3",
    year: 2009,
    key: {
        id: "id_of_the_key_3",
        name: "name_of_the_key_3"
    }}
];

var serverResult2 = [
    {
    name: "name_1_2",
    year: 2011,
    key: {
        id: "id_of_the_key_1_2",
        name: "name_of_the_key_1_2"
    }},
{
    name: "name_2",
    year: 2010,
    key: {
        id: "id_of_the_key_2_2",
        name: "name_of_the_key_2_2"
    }}
];

var viewModel = {
    term: ko.observableArray(serverResult1 || []),
    getData: function() {
        var result = [];
        // here we are simulating the request to server for data
        // we just returning different results to see the effect
        if (this.term() === serverResult1) {
            this.term(serverResult2);
        } else {
            this.term(serverResult1);
        }
    }
}

ko.applyBindings(viewModel);