JSFiddle - React, Tailwind, and code Playground

by paulcollinsiii

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<html>
    <head>
        <script type="text/x-handlebars-template" id="parent">
            <table>
                <thead>
                    <tr>
                        <th>One</th>
                        <th>Two</th>
                    </tr>
                </thead>
                <tbody>
                {{#each collection}}
                    {{>myPartial this}}
                {{/each}}
                </tbody>
            </table>
        </script>

        <script type="text/x-handlebars-template" id="partial">
            <tr>
                <th>data: {{this.a}}{{#if this.b}} has b{{/if}}</th>
                <th>text</th>
            </tr>
        </script>
    </head>
    <body>
        <p>Just some output to show there's something intially</p>
        <div id='output'></div>
    </body>
</html>

JavaScript

$(document).ready(function(){
    var collection = [{a: 1}, {a: 2, b: true}, {a: 3, b: true}];
    
    if(!Handlebars.templates){ Handlebars.templates = {}; }
    
    Handlebars.templates.full = Handlebars.compile($('#parent').html());
    Handlebars.templates.partial = Handlebars.compile($('#partial').html());
    Handlebars.registerPartial("myPartial", Handlebars.templates.partial);
    
    $('#output').html(Handlebars.templates.full({collection: collection}));

});