JsRender Fundamentals - Module 1 - Hello World (with jquery, jsrender, and bootstrap)

by rajeshpillai

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.83/jsrender.min.js"></script>
<button id="goBtn" class="btn btn-primary">Go JsRender</button>
<button id="clearBtn" class="btn btn-danger">Clear</button>

<div id="output"></div>

<script id="template" type="text/x-jsrender">
<ul>
    {{for people}}
    <li>{{:name}} likes to wear {{:shirtColor}} shirts</li>        
    {{/for}}
</ul>
</script>

CSS

body {margin: 15px; }

JavaScript

var data = {
    people: [{
        name: 'Dan Wahlin',
        shirtColor: 'white'},
    {
        name: 'John Papa',
        shirtColor: 'black'},
    {
        name: 'Scott Guthrie',
        shirtColor: 'red'}
                    ]
};

$('#goBtn').click( function() {
    $('#output').html( $('#template').render(data) );
});

$('#clearBtn').click( function() {
    $('#output').html( '' );
});