JSFiddle - React, Tailwind, and code Playground

by Academia

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.2.1/backbone.marionette.min.js"></script>
<div id="tree"></div>

<script id="nodeTemplate" type="text/template">
    <li><%= nodeName %></li>
</script>

JavaScript

app = new Backbone.Marionette.Application();

app.addRegions({
	mainRegion: "#tree"
});

var TreeView = Backbone.Marionette.CompositeView.extend({
    template: "#nodeTemplate",    
    tagName: "ul",
    initialize: function(){
        this.collection = this.model.nodes;
    },
});

var TreeRoot = Backbone.Marionette.CollectionView.extend({
    childView: TreeView
});


treeData = [
    {nodeName: "Slide View"},
    {nodeName: "Select 1", 
     nodes: [
         {nodeName: "Sub Select 11"},
         {nodeName: "Sub Select 12"},
         {nodeName: "Sub Select 13"}
     ]},
    {nodeName: "Select 2", 
     nodes: [
         {nodeName: "Sub Select 21"},
         {nodeName: "Sub Select 22"},
         {nodeName: "Sub Select 23"}
     ]},
    {nodeName: "Select 3", 
     nodes: [
         {nodeName: "Sub Select 31"},
         {nodeName: "Sub Select 32"},
         {nodeName: "Sub Select 33"}
     ]},
];

TreeNode = Backbone.Model.extend({
    initialize: function(){
        var nodes = this.get("nodes");
        if (nodes){
            this.nodes = new TreeNodeCollection(nodes);
            this.unset("nodes");
        }
    }        
});

TreeNodeCollection = Backbone.Collection.extend({
    model: TreeNode
});

app.addInitializer(function(options){
	var treeView = new TreeRoot({
		  collection: options.tree
	});
	app.mainRegion.show(treeView);
});

$(document).ready(function(){
	var tree = new TreeNodeCollection(treeData);
	app.start({tree: tree});
});