JSFiddle - React, Tailwind, and code Playground

by kapilgopinath

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<div id="treelist">
    <div id="scroll-list"></div>
</div>
<script id="liTemplate" type="text/template">
    <a data-id="<%=id%>" data-parid="<%=parent_id%>"><%=text%></a>
</script>
<script id="navTemplate" type="text/template">
    <a class = "goBack"  data-navid="<%=nav_id%>"><< Back</a>
</script>

CSS

ul {
     float:left;
     margin:10px
 }
 #treelist {
     position:relative;
     width:33%;
     height:200px;
     overflow:hidden;
     border-style: ridge;
     border-width: 5px;
 }
 #scroll-list {
     width:1500px;
     height:100%;
     position:absolute
 }
 #scroll-list ul {
     float: left;
     height: 91%;
     width: 151px;
     margin: 10px 0 0 26px;
     padding: 0;
     position:relative;
     font-weight:bold
 }
 .goBack {
     font-weight: bold;
     position: absolute;
     right: 5px;
     bottom: -6px;
     color: rgb(0, 143, 255);
     font-style: italic;
 }

JavaScript

var treeJSon = {
    "text": "europe",
        "leaf": false,
        "children": [{
        "text": "spain",
            "leaf": false,
            "children": [{
            "text": "realmadrid",
                "leaf": false,
                "children": [{
                "text": "ronaldo",
                    "leaf": true
            }]
        }, {
            "text": "barcelona",
                "leaf": false,
                "children": [{
                "text": "messi",
                    "leaf": true
            }]
        }]
    }, {
        "text": "england",
            "leaf": false,
            "children": [{
            "text": "unknown english",
                "leaf": true
        }, {
            "text": "liverpool",
                "leaf": false,
                "children": [{
                "text": "gerald",
                    "leaf": true
            }]
        }]
    }]
};
parId = 0;
parentArr = {};
var Item = Backbone.Model.extend({
    defaults: {
        text: 'world'
    }
});
var Collection = Backbone.Collection.extend({
    url: '/echo/json/',
    ret: [],
    parse: function (response) {
        return this._parseTree(response);
    },
    _parseTree: function (response, parent_id) {
        if (!response) return;
        if (!response.length) {
            var model = _.extend({
                id: _.uniqueId(),
                parent_id: parent_id
            }, _.omit(response, 'children'));
            this.ret.push(model);
            this._parseTree(response.children, model.id);
        } else {
            response.forEach(function (item) {
                this._parseTree(item, parent_id);
            }, this);
        }
        return this.ret;
    },
    collFilter: function (filter) {
        return filteredCollection = collection.filter(function (item) {
            if (filter == "parent_id") {
                return (typeof (item.get("parent_id")) === 'undefined');
            } else if (filter == "id") {
             ...