Marionette.js List

Marionette.js 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.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">
  <%- name %>
</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,
});

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

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

	className: 'js-list-container',

	template: '#ListViewTemplate',

	childViewContainer: 'ul',

	childView: ItemView
});

var dataArray = [
    {"name":"FirstObject"},{"name":"SecondObject"},{"name":"ThirdObject"}
];

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

App.mainRegion.show(listView);