JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script id="template" type="text/x-handlebars-template">
    <!-- without partial -->
    {{#each hobbies}}    
    {{../name}} has hobby {{hobbyname}} and lives in {{../town}}
    {{/each}}            
    
    <br><br>
    
    <!-- with partial -->
    {{#each hobbies}}    
    {{include "template-partial" parentcontext=.. town=../town}}
    {{/each}}
    
</script>

<script id="template-partial" type="text/x-handlebars-template">    
   {{parentcontext.name}} has hobby {{hobbyname}} and lives in {{town}}
</script>


<div id="tempplateTarget"></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.partials["template-partial"] = Handlebars.compile( sourcePartial );
    
Handlebars.registerHelper('include', function(templatename, options){  
    var partial = Handlebars.partials[templatename];
    var context = $.extend({}, this, options.hash);
    return partial(context);
});


var template = Handlebars.compile(source);
var html = template(context);

$("#tempplateTarget").html(html)