Marionette Nested Tree List

Marionette Nested Tree List

by Nirvanachain

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.js"></script>
<div class="js-page">
</div>

<script type="text/template" id="ListViewTemplate">
    <h3>Here is a list</h3>
    <ul class="js-list">
    
    </ul>
</script>

<script type="text/template" id="ItemViewTemplate">
  hi
</script>

JavaScript

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

App.addRegions({
  mainRegion: '.js-page'
});

App.start();

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

var TheCollection = Backbone.Collection.extend({
    model: TheModel,
  
    url: 'https://api.mongolab.com/api/1/databases/redoakcomponentsobj/collections/componentsobj?apiKey=qcVNgNb-s1X4WJkLeRDfykxqtMG-ezkC',
  
    parse: function(response) {
        // The items array in the collection is the initial collection of models
        console.log(response);        
        return response[0].items;  
    }
});

var ListView = Backbone.Marionette.CompositeView.extend({
	tagName: 'div',

	className: 'js-list-container',

	template: _.template( '#ListViewTemplate' ),

	childViewContainer: 'ul',

	childView: ItemView
});

var ItemView = Backbone.Marionette.ItemView.extend({
    initialize: function() { 
        console.log('this.model =',this.model); 
        console.log(this);      
    },
    
    tagName: 'li',
  
    className: 'list-item',
  
    template: _.template( '#ItemViewTemplate' )
});

var theCollection = new TheCollection();
var listView = new ListView({collection: theCollection});

theCollection.fetch();

App.mainRegion.show(listView);