JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>
<script id="p1" type="text/x-handlebars">
    <p>partial 1: {{pancakes}}</p>
</script>
<script id="p2" type="text/x-handlebars">
    <p>partial 2: {{pancakes}}<p>
</script>
<script id="p3" type="text/x-handlebars">
    <p>partial 3: {{pancakes}}</p>
</script>
<script id="t" type="text/x-handlebars">
    <section class="wrapper">
        {{{partial p this}}}
        {{> p3}}
    </section>
</script>

CSS

.wrapper {
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
}

JavaScript

Handlebars.registerHelper('partial', function(name, ctx, hash) {
    var ps = Handlebars.partials;
    if(typeof ps[name] !== 'function')
        ps[name] = Handlebars.compile(ps[name]);
    return ps[name](ctx, hash);
});
Handlebars.registerPartial('p1', $('#p1').html());
Handlebars.registerPartial('p2', $('#p2').html());
Handlebars.registerPartial('p3', $('#p3').html());

var t = Handlebars.compile($('#t').html());
$('body').append(t({ p: 'p1', pancakes: 'one' }));
$('body').append(t({ p: 'p2', pancakes: 'two' }));