CompositeView

Backbone:Marionette w/ Bootstrap CSS

by bryanbuchs

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/0.10.2/backbone.marionette.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<p>Same instance of a collection, rendered through two different CompositeViews:</p>

<h4>Collection as Grid:</h4>
<div id="grid"></div>

<h4>Collection as List:</h4>
<div id="list"></div>






<script type="text/template" id="grid-template">
    <section></section>
</script>
        
<script type="text/template" id="row-template">
    <div class="row-fluid"></div>
</script>

<script type="text/template" id="list-template">
    <div class="pagination">
        <ul></ul>
    </div>
</script>
        
<script type="text/template" id="item-template">
    <a href="#<%= id %>"><%= id %></a>
</script>

CSS

body {
    padding: 1em;
}

.row-fluid {
    margin: 1em 0;
    width: auto;
}
.row-fluid a {
  display: block;
    background-color: #eee;
  text-align: center;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  min-height: 40px;
  line-height: 40px;
    

    
}

JavaScript

var Item = Backbone.Model.extend();
var Items = Backbone.Collection.extend({
    model: Item
});

var Views = {};

Views.GridItem = Backbone.Marionette.ItemView.extend({
    template: "#item-template",
    tagName: 'div',
    className: 'span2'
});

Views.GridRow = Backbone.Marionette.CompositeView.extend({
    template: "#row-template",
    itemView: Views.GridItem,
    itemViewContainer: "div.row-fluid",
    initialize: function() {
        this.collection = new Backbone.Collection(_.toArray(this.model.attributes));
    }
});

Views.Grid = Backbone.Marionette.CompositeView.extend({
    template: "#grid-template",
    itemView: Views.GridRow,
    itemViewContainer: "section",
    initialize: function() {
        var grid = this.collection.groupBy(function(list, iterator) {
            return Math.floor(iterator / 4); // 4 == number of columns
        });
        this.collection = new Backbone.Collection(_.toArray(grid));
    }
});

Views.ListItem = Backbone.Marionette.ItemView.extend({
    template: "#item-template",
    tagName: 'li'
});

Views.List = Backbone.Marionette.CompositeView.extend({
    template: "#list-template",
    itemView: Views.ListItem,
    itemViewContainer: "ul"
});


var Data = [
    {id: 1},
    {id: 2},
    {id: 3},
    {id: 4},
    {id: 5},
    {id: 6},
    {id: 7},
    {id: 8},
    {id: 9},
    {id: 10},
    {id: 11}
];


var items = new Items(Data);

var grid = new Views.Grid({
    collection: items
});
var list = new Views.List({
    collection: items
});


list.render();
grid.render();

$("#grid").html(grid.el);
$("#list").html(list.el);