Marionette Collections

A base template to use for building Backbone and Marionette applications. http://marionettejs.com

by casebash

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.wreqr/master/lib/backbone.wreqr.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.babysitter/master/lib/backbone.babysitter.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.marionette/master/lib/backbone.marionette.js"></script>
<div id="main"></div>

<script type="text/html" id="cv">
    <table class="table table-condensed">
        <thead>
            <td>Item</td>
        </thead>
        <tbody class="tbody">
        </tbody>
    </table>
</script>

<script type="text/html" id="mv">
    Hi <%= a %>
</script>

JavaScript

var M = Backbone.Model.extend({
    defaults:{
        a: 100
    }
});

var C = Backbone.Collection.extend({
    model: M,
});
var c=new C();

var MV = Backbone.Marionette.View.extend({
    template: "#mv"
});

var EV = Backbone.View.extend({
    tagName: "tr",
    render: function(){
        this.$el.html("<td>Empty</td>");
        return this;
    }
});

var CV = Backbone.Marionette.CompositeView.extend({
    tagName: "div",
    template: "#cv",
    itemView: MV,
    emptyView: EV,
    itemViewContainer: "tbody"
});

var cv=new CV({
    collection: c
});
cv.render();
$("#main").replaceWith(cv.el);
c.add({a:9});