JSFiddle - React, Tailwind, and code Playground

by kapilgopinath

HTML

<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<p>Tree Data!</p>
        <div id="tree-json"></div>

JavaScript

var treeData = [{
                    'id': 1,
                    'title': 'root - level 0',
                    'items': [{
                            'id': 2,
                            'title': 'manager - level 1',
                            'items': [{
                                    'id': 3,
                                    'title': 'teeks - level 2'
                                }]
                        }, {
                            'id': 4,
                            'title': 'ymoo - level 1'
                        }
                    ]
                }];


            $(function() {
                var treeNode = Backbone.Model.extend({
                    initialize: function( ) {
                        var items = this.get('items');
                        if (items) {
                            this.items = new treeCollection(items, {
                                parent: this.collection
                            });
                            this.unset('items');
                        }
                    }
                });

                var treeCollection = Backbone.Collection.extend({
                    model: treeNode,
                    parent: null,
                    initialize: function(models, options) {
                        options = options || {};
                        this.parent = options.parent || null;
                    }
                });

                var treeItemView = Backbone.View.extend({
                    tagName: 'li',
                    parent: null,
                    initialize: function(args) {
                        _.bindAll(this, 'toggle');
                        this.collection = this.model.items;
                        this.$holder = args.holder;
                    },
                    events: {
                        'click': 'toggle'
                    },
                    toggle: function(e) {
                        e.stopPropagation();

            ...