JSFiddle - React, Tailwind, and code Playground

by AndrewHenderson

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">
    <!-- with partial -->
    {{#eachIncludeParent hobbies parent=this}}
        {{> template-partial }}
    {{/eachIncludeParent}}
</script>
<script id="template-partial" type="text/x-handlebars-template">    
   {{parentContext.name}} has hobby {{hobbyname}} and lives in {{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('eachIncludeParent', function ( context, options ) {
    var fn = options.fn,
        inverse = options.inverse,
        ret = "",
        _context = [];
        $.each(context, function (index, object) {
            var _object = $.extend({}, object);
            _context.push(_object);
        });
    if ( _context && _context.length > 0 ) {
        for ( var i = 0, j = _context.length; i < j; i++ ) {
            _context[i]["parentContext"] = options.hash.parent;
            ret = ret + fn(_context[i]);
        }
    } else {
        ret = inverse(this);
    }
    return ret;
});

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

$("#templateTarget").html(html);