Simple JsRender Example 3

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:showHideDetails, text:showHideText, css:{'btn btn-medium':true, 'btn-danger': showDetails}" ></button>
<br/><br/>

<div data-bind="html:opHtml"></div>

CSS

body {margin: 15px;}

.buttonclass
{
    border: red 2px solid;
}

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 details = "<li>{{:name}} : {{:game}}</li>";
    var summary = "<li>{{:name}}</li>";

    $.templates('tmpl_details', details);
    $.templates('tmpl_summary', summary);

    var showDetails = ko.observable(false);
    var opHtml = ko.observable();
    var showHideText = ko.computed(function() {
        return showDetails() ? 'Hide Details' : 'Show Details';
    });

    var showHideDetails = function() {
        if (showDetails()) {
            opHtml($.render.tmpl_summary(data.players));
        } else {
            opHtml($.render.tmpl_details(data.players));
        }
        showDetails(!showDetails());
    };

    return {
        data: data,
        showHideDetails: showHideDetails,
        opHtml: opHtml,
        showHideText: showHideText,
        showDetails: showDetails
    };
}();

ko.applyBindings(viewModel);