Marionette Composite View

A simple rendering of a Marionette Composite view

by craigjennings11

HTML

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.js"></script>
<div id="region"/>

CSS

li {
 color : blue;
 padding: 0 0 0 10px;   
}

JavaScript

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

var Collection = Backbone.Collection.extend({ 
    model: CollectionModel
});

var View = Backbone.Marionette.ItemView.extend({
    tagName : 'li',
    template: _.template("Number = <%= number %>")
});

var CompositeView  = Backbone.Marionette.CompositeView.extend({
    template: _.template("<h1>Count = <%=count%></h1> <ul class='items'></ul>"),
    itemView: View,
    itemViewContainer: '.items',
    collectionEvents: {
        'add': 'refresh'
    },
    refresh: function() {
        this.model.set('count', collection.length);
        this.render();
    }
});

var region = new Backbone.Marionette.Region({ el: '#region'});

var collection = new Collection([{number: '1'}, {number: '2'}]);
var model = new Model({count : collection.length});
                            
var view = new CompositeView({model: model, collection: collection});

region.show(view);

var t = setTimeout(function() {
    collection.add({number: '3'});
}, 1000);