HandleBars - template inside templates
handlebars.js, html, javascript
Solution
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>
Problem
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 ??