JSFiddle - React, Tailwind, and code Playground

by jrunning

HTML

<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/template" id="wrapperTmpl">
    <div id="recourseParameter">
        <h1>Parameter : <%= locals.parameterCode %></h1>
        <table>
            <thead>
                <tr><th colspan=5>header</th></tr>
            </thead>
            <tbody>
                <%= locals.bodyTmpl(locals) %>
            </tbody>
        </table>
        <span>
            <%= locals.recourseParameter.length ? "Continue..." : "All are done" %>
        </span>
    </div>
</script>

<script type="text/template" id="groupTmpl">
    <% _.each(locals.group, function (item, index) { %>
        <% if(item.description) { %>
            <tr><td colspan=5><%= item.description %></td></tr>
        <% } %>
    <% }) %>
</script>

<script type="text/template" id="recourseParameterTmpl">
    <% var locals = _.defaults({ bodyTmpl: locals.groupTmpl }, locals) %>
    <% while(locals.group = locals.recourseParameter.splice(0, locals.limit), locals.group.length) { %>
        <%= locals.wrapperTmpl( locals ) %>
    <% } %>
</script>

JavaScript

_.templateSettings.variable = "locals";
    
var tmpl = _.template( $('#recourseParameterTmpl').html() ),
    locals = {
        limit: 3,
        parameterCode: "foo",
        recourseParameter: [
            { description: "Foo 1" },
            { description: "Foo 2" },
            { description: "Foo 3" },
            { description: "Foo 4" },
            { description: "Foo 5" },
            { description: "Foo 6" },
            { description: "Foo 7" },
            { description: "Foo 8" },
            { description: "Foo 9" },
            { description: "Foo 10" },
            { description: "Foo 11" }
        ]
    },
    renderedTmpl
;

locals.wrapperTmpl = _.template( $('#wrapperTmpl').html() );
locals.groupTmpl = _.template( $('#groupTmpl').html() );
// You could also automate the above with jQuery, e.g.:
//     $("[type='text/template']").each(function() {
//       var el = $(this), id = el.attr('id');
//       locals[id] = _.template( el.html() );
//     });

renderedTmpl = tmpl(locals)
$('body').append(renderedTmpl)