HandleBars - template inside templates

Question

I'm using handlerbars to create templates. Suppose that I'm doing a TODO list. I have a collection and I need also support for adding new TODO elements with the same style.

So far I have a TODO template collection:

<script id="TODO-collection-templ" type="text/x-handlerbars-template">
    <div id="collection">
        <ul>
            {{#list todos}}
                <li><span>{{this.title}}</span><span>{{this.description}}</span></li>
            {{/list}}
        </ul>
    </div>
</script>

If I want to add new elements, the only way (to me) it would be creating another template that builds the following:

<script id="TODO-templ" type="text/x-handlerbars-template">
    <li><span>{{title}}</span><span>{{description}}</span></li>
</script>

So I end up having two templates but those are prone to errors (If I change something in TODO-collection-templ and I forget to do the same change over the TODO-templ, it will not render the Html properly)

Is there any way to include the TODO-templ inside the TODO-collection-templ ??

Answer 1

There are partials in Handlebars like in Mustache's: http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers

Basically you can organise your micro-template as a partial and use it in the bigger template:

<script id="TODO-partial" type="text/x-handlebars-template">
  <li><span>{{title}}</span><span>{{description}}</span></li>
</script>

<script id="TODO-collection-templ" type="text/x-handlebars-template">
  <div id="collection">
    <ul>
        {{#list todos}}
            {{> TODO}}
        {{/list}}
    </ul>
  </div>
</script>