CompositeView

Backbone:Marionette w/ Bootstrap CSS

by aaronaudic

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">
<script src="//cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<script src="//mock.truthopoly.com/scripts/kendo/kendo.backbone.dataSource.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js "></script>
<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 %>"><%= userName %></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: 'li',
    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(0);
        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 Data1 = [
    {id: 1},
    {id: 2},
    {id: 3},
    {id: 4},
    {id: 5},
    {id: 6},
    {id: 7},
    {id: 8},
    {id: 9},
    {id: 10},
    {id: 11}
];

        var Data = [
        {
            id: 1,
            userName: "Aaronaudic",
            location: "United States",
            locationAbbreviation: "us",
            onlineStatus: "online",
            commentCount: 544,
            avatar: "aaron_avatar_01.jpg",
            avatarSmall: "aaron_avatar_01_sm.jpg",
            gender: "male",
            postedOnDiff: null,
            postedOn: null,
            isModerator: true,
            isAdmin: true,
            userType: "admin",
            comment: "Just look at how many times FB has ALREADY burned their userbase with \"privacy violations\" and caused them far more inconvenience in profile redesigns than sharing info with the government ever will and yet,...