JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script id="template" type="text/x-handlebars-template">
<!-- with partial -->
{{#each hobbies}}
{{#include parent=.. }}
{{> template-partial}}
{{/include}}
{{/each}}
</script>
<script id="template-partial" type="text/x-handlebars-template">
{{parent.name}} has hobby {{hobbyname}} and lives in {{parent.town}}.
</script>
<div id="templateTarget"></div>
JavaScript
var context = {name: "Dennis", town: "Berlin", hobbies: [{hobbyname: "swimming"}, {hobbyname: "dancing"}, {hobbyname: "movies"}]}
var source = $("#template").html();
var sourcePartial = $("#template-partial").html();
Handlebars.registerPartial("template-partial", sourcePartial);
Handlebars.registerHelper('include', function(options) {
var context = {},
mergeContext = function(obj) {
for(var k in obj)context[k]=obj[k];
};
mergeContext(this);
mergeContext(options.hash);
return options.fn(context);
});
var template = Handlebars.compile(source);
var html = template(context);
$("#templateTarget").html(html);