Backbone Nested Tree List

Backbone Nested Tree List

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 id="main"></div>

<script type="text/template" id="tree-template">
    <li><%- name %></li>
    
    <% //This console.log fails and I don't know why %>
    <% console.log('inside template model =',model) %>
</script>

JavaScript

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

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

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

var TreeCollection = Backbone.Collection.extend({
    model: TreeModel,
    
    url: 'https://api.mongolab.com/api/1/databases/backbone-tree/collections/tree?apiKey=someKey'
    
});
// Tree branch view
var CompositeView = Backbone.Marionette.CompositeView.extend({    
    tagName: 'ul',
    
    template: _.template( $('#tree-template').html() )
});

// Tree root view
var CollectionView = Backbone.Marionette.CollectionView.extend({   
    tagName: 'div',
    
    className: 'js-tree-root',
    
    childView: CompositeView,
});

var treeCollection = new TreeCollection();
treeCollection.fetch().done(function () {
    var collectionView = new CollectionView({collection: treeCollection});
    App.mainRegion.show(collectionView);    
});