JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgithub.com/wycats/handlebars.js/master/dist/handlebars.js"></script>
<script type="text/template" id="template">
<h1>Template without partial</h1>
<h2>Parent: {{id}}</h2>
<ul>
{{#each children}}
<li>{{../id}} - {{id}}</li>
{{/each}}
</ul>
</script>
<script type="text/template" id="template_with_partial">
<h1>Template with partial</h1>
<h2>Parent: {{id}}</h2>
<ul>
{{#each children}}
{{>partial this}}
{{/each}}
</ul>
</script>
<script type="text/template" id="partial">
<li>{{../id}} - {{id}}</li>
</script>
CSS
body {
font-family: Arial;
text-align: center;
}
h1 {
margin-top: 20px;
font-size: 20px
}
h2 {
font-size: 14px
}
JavaScript
var data = {
id:"PARENT_ID",
children: [
{ id: "CHILDREN_1" },
{ id: "CHILDREN_2" },
{ id: "CHILDREN_3" }
]
}
var template = Handlebars.compile($("#template").html());
$("body").append( template(data) );
Handlebars.registerPartial("partial", $("#partial").html());
var template_with_partial = Handlebars.compile($("#template_with_partial").html());
$("body").append( template_with_partial(data) );