Simple JsRender Example 2

JsRender

by deshpandeakhil

HTML

<script src="https://raw.github.com/BorisMoore/jsrender/master/jsrender.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<h6>Simple JSRender + Knockout example</h6>
<button data-bind="click:getPlayers" class="btn btn-primary">Show Players</button>
<button data-bind="click:clearPlayers" class="btn btn-danger">Hide</button><br/><br/>
<div data-bind="html:opHtml"></div>

<script id="templateOuter" type="text/x-jsrender">
<ul>
   {{for players tmpl="#playerTemplate" /}}
</ul>
</script>

<script id="playerTemplate" type="text/x-jsrender">
     <li>
    <div>{{:#index+1}} - {{:name}} plays {{:game}} and lives in 
        {{for address}}
            {{:city}}, {{:country}}
        {{/for}}                 
    </div>
        <div>Also known as {{:description}} or in html {{html:description}}</div>
        {{if likes.length>0}}
            <div><b>Interests:</b> 
                <ul>
                    {{for likes ~pName=#data.name}}
                        <li>{{:#parent.parent.data.name}} (accessed up the hierarchy) likes {{:#data}}</li>
                    <li>{{:~pName}} (accessed down the hierarchy) likes {{:#data}}</li>
                    {{/for}}
                </ul>                
            </div>
        {{else}}
        <div><b>No Interests Defined</b></div>            
        {{/if}}
    </li><br/>
</script>

CSS

body {margin: 15px;}

JavaScript

var viewModel = function() {
    var data = {
        players: [{
            name: 'Sachin Tendulkar',
            game: 'Cricket',
            description: '<b>Master Blaster</b>',
            likes: ["cricket", "seafood", "cars"],
            address: {
                city: 'Mumbai',
                country: 'India'
            }},
        {
            name: 'Roger Federer',
            game: 'Tennis',
            description: '<b>Fed Ex</b>',
            likes: [],
            address: {
                city: 'Basel',
                country: 'Switzerland'
            }},
        {
            name: 'Michael Jordan',
            game: 'BasketBall',
            description: '<b>His Airness</b>',
            likes: ["BasketBall", "golf", "haynes"],
            address: {
                city: 'Chicago',
                country: 'USA'
            }}]
    };

    var opHtml = ko.observable();
    
    var getPlayers = function() {
        opHtml($('#templateOuter').render(data));
    };

    var clearPlayers = function() {
        opHtml("");
    };

    return {
        data: data,
        opHtml: opHtml,
        getPlayers: getPlayers,
        clearPlayers: clearPlayers
    };
}();

ko.applyBindings(viewModel);