JSFiddle - React, Tailwind, and code Playground

by steveukx

HTML

<script src="http://igpc4302/jslib/mustache/mustache.js"></script>
<div id="robert_content"></div>
<script type="text/template" id="node_template">
    <header>{{something}}</header>
    <ul>
        {{#items}} <li class="blah"> {{textContent}} </li> {{/items}}
    </ul>           
</script>

<section id="node-template" class="hidden-view view-template">
    <header></header>
    <ul>
        <!-- items go in here -->
    </ul>
</section>

CSS

.hidden-view {
    display: none;
}

JavaScript

var DATA_TYPE_NODE = 'node',
    DATA_TYPE_LIST = 'list',
    DATA_TYPE_BLAH = 'whatever';

var handlers = {
    node: function(nodeData) {
        // Mustache.render(templates.node, nodeData);
        jQuery('.view-template').addClass('hidden-view');
        jQuery('#node-template')
            .removeClass('hidden-view')
            .find('header').text(nodeData.something).end()
            .find('ul').html(htmlGenerator()).end()
    },
    list: function() {},
    whatever: function() {}
},
templates: {
    node: document.getElementById('node_template').textContent
}
    

var data = [{
        nodes: [
            {blah: "foo", blah2: "foo"},
            {blah: "bar", blah2: "bar"}
        ]
    }];

var container = jQuery('#robert_content'),
    ul = jQuery('<ul id="something"></ul>')
            .appendTo(container)
            .on('click', 'li', function(e) {
                var jElement = jQuery(e.target),
                    nodeType = jElement.data('nodeType'),
                    nodeData = jElement.data('node');
                handlers[nodeType](nodeData, jElement);
            });

for(var i = 0; i < data.length; i++) {
    var nodeList = data[i].nodes;
    showNodes(nodeList);
}
        
function showNodes(nodesList) {
    for(var i = 0; i < nodesList.length; i++) {
        ul.append( jQuery('<li />').text(nodesList[i].blah)
                       .data('nodeType', DATA_TYPE_BLAH)                       
                       .data('node', nodesList[i]) );
    }
}