JsRender Fundamentals - Module 3 - Context change with {{for}}

{{for}} context address

by johnpapa

HTML

<script src="http://borismoore.github.com/jsrender/jsrender.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div id="target"></div>

<script id="myTmpl" type="text/x-jsrender">
<table class="table table-bordered table-condensed table-striped">
    <thead class="label">
        <tr>
            <td>#</td><td>Name</td><td>Address</td>
        </tr>
    </thead>
    <tbody>
        {{for people}}
        <tr>
            <td>{{:#index+1}}</td>
            <td>{{:name}}</td>
            <td>
                {{for address}}
                <p>{{:street1}} </p>
                <p>{{:street2}} </p>
                <p>{{:city}}, {{:state}} {{:postalCode}}</p>
                {{/for}}
            </td>
        </tr>
        {{/for}}
    </tbody>
</table>
</script>

JavaScript

var
data = {
    people: [
        {
        name: 'John',
        address: {
            street1: 'Broadway',
            street2: 'Apt 1',
            city: 'Coast of Somewhere Beautiful',
            state: 'FL',
            postalCode: 77777
        },
        },
        {
        name: 'Colleen',
        address: {
            street1: '4th and Mayor',
            street2: 'Apt 4',
            city: 'Idunno',
            state: 'WA',
            postalCode: 99999
        },
        },
        {
        name: 'Landon',
        address: {
            street1: '1 Lois Lane',
            street2: 'PO Box 76123',
            city: 'Somewhere',
            state: 'FL',
            postalCode: 12345
        }}]
    };


    $('#target').html($('#myTmpl').render(data));