Accessing bound data with Handlebars

An example showing how to access the data that was bound to a specific element that was generated via a Handlebars template.

by sidonaldson

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script type="text/x-handlebars" id="people-template">
     <p>IN CONTENT</p>
    {{#each content.items}}
    {{#if prop}}
    <p>{{prop}} + {{../../variable}}</p>
    {{/if}}
    {{/each}}
    <p>OUTSIDE CONTENT</p>
    {{#each items}}
    {{#if prop}}
        <p>{{prop}} + {{../../variable}}</p>
    {{/if}}
    {{/each}}
</script>

JavaScript

var context = {
    content: {
        variable : "STRING1",
        items: [{
            prop: "prop1"
        }, {
            prop: "prop2"
        }]
    },
    variable : "STRING2",
    items: [{
        prop: "prop1"
    }, {
        prop: "prop2"
    }]
};


var template = Handlebars.compile($("#people-template").text());
$(document.body).append(template(context));