Marionette Nested Tree List - Toggle

Marionette Nested Tree List - Toggle

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.min.js"></script>
<div class="main-region">
</div>

<script type="text/template" id="tree-template">
    <li class="js-node">
        <% if (item.children) { %>
            Click to toggle -
        <% } %>
        <%- item.title %>
          
    </li>
</script>

CSS

.tree-list .tree-list {
    display: block;
}

JavaScript

var obj_data = {
    "title": "Ford",
    "children": [
        {
            "title": "Car",
            "children": [
                {
                    "title": "Focus",
                },
                {
                    "title": "Taurus"   
                }
                
            ]
        },
        {
            "title": "Truck",
            "children": [
                {
                    "title": "F-150"
                }
            ]
        }
    ]
};

var TheModel = Backbone.Model.extend({
});

var TheCollection = Backbone.Collection.extend({
    model: TheModel,
    
});

var App = new Backbone.Marionette.Application();

App.addRegions({
    mainRegion: '.main-region' 
});

var TreeItemView = Backbone.Marionette.CompositeView.extend({
    initialize: function() {
        if ( this.model.get('children') ) {
            this.collection = new TheCollection( this.model.get('children') );
        }
    },
    
    tagName: 'ul',
    
    className: 'tree-list',
    
    template: _.template( $('#tree-template').html() ),
    
    serializeData: function () {

      return {
        item: this.model.toJSON()
      };
    },
    
    attachHtml: function(collectionView, childView) {
        collectionView.$('li:first').append(childView.el);
    },
    
    events: {
        'click .js-node': 'toggle'
    },
    
    toggle: function(e) {
        var $e = $(e.currentTarget);
        $e.children('.tree-list').slideToggle();
        e.stopImmediatePropagation(); 
    }
    
});

var TreeRootView = Backbone.Marionette.CollectionView.extend({
    tagName: 'div',
    className: 'tree-root',
    childView: TreeItemView
});


var theCollection = new TheCollection(obj_data);

App.getRegion('mainRegion').show( new TreeRootView({collection: theCollection}) );