JSFiddle - React, Tailwind, and code Playground

by zainshaikh

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="result"></div>
<script type="text/template" id="template">
    <ul>
    <% entries.forEach(function(entry) { %>
        <li> 
        <%= entry.title %> <%
        if (entry.children) {
            print(tmpl({
                entries: entry.children,
                tmpl: tmpl
            }));
        } %>
            </li>
    <% }); %>
</ul>
</script>

JavaScript

var entryTree = [{
    "title":"Item 1",
    "children": [{
        "title": "child 1.1"
    },{
        "title" : "child 1.2"
    }]
},{
    "title":"Item 2",
    "children": [{
        "title": "child 2.1"
    },{
        "title" : "child 2.2",
        "children" : [
            {"title": "child 2.2.1"},
            {"title": "child 2.2.2"}
        ]
    }]
}];

var templateHtml = $('#template').html()
entriesTmpl = _.template(templateHtml);

var compiled = entriesTmpl({
    entries: entryTree,
    tmpl: entriesTmpl
})


$el = $('#result');
$el.html(compiled);