Handlebars 101

It is possible to iterate objects in handlebars templates. In below example countries is an object of key:value pairs where key is letter of alphabet and value is an array of countries whose name starts with that letter. @key returns key and “this” returns value for that key. It’s possible to use “../“ to access parent properties.

<dl>
    {{#each countries}}
        <dt>{{toUpperCase @key}}</dt>
            <dd>
            <ul>
            {{#each this}}
                <li><a href="{{../../url}}?country={{country_name}}">{{country_name}}</a></li>
                {{/each}}
            </ul>
        </dd>
        {{/each}}
</dl>

Handlebars.registerHelper('toUpperCase', function(str) {
    return str.toUpperCase();
});