Getting Started with jsRender

by mrrodd

HTML

<script src="http://borismoore.github.com/jsrender/jsrender.js"></script>
<!-- jsRender Template -->
<script id="template" type="text/x-jsrender">
    <ul>
        {{for people}}
        <li>{{:name}} likes to wear {{:shirtColor}} shirts</li>
        {{/for}}
    </ul>
</script>

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

CSS

.Medium
{
    font-family: arial;
    font-size: 12px;
}

JavaScript

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

$('#output').html( $('#template').render(data) );