Backbone.ListView Example

by zinssmeister

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<div id="list-wrapper"></div>

CSS

#list-wrapper ul{
    list-style:none;
    padding: 0;
    margin: 0;
}

#list-wrapper ul li{
    display:inline-block;
    background:#ddd;
    border-radius:5px;
    width:100px;
    padding:15px;
    margin:10px;
    font-family: Helvetica;
    font-size:12px;
}

JavaScript

// Minified Backbone.ListView
// dev version can be found at 
// https://github.com/Zinssmeister/Backbone.ListView/
//
Backbone.ListView=Backbone.View.extend({tagName:"ul",initialize:function(e){this.itemView=e.itemView;this.itemViews=[];this.listenTo(this.collection,"add",this.render);this.listenTo(this.collection,"reset",this.render)},render:function(){this.purgeItemViews();if(this.collection.length>0){_.each(this.collection.models,function(e){var t=new this.itemView({model:e,collection:this.collection});this.itemViews.push(t);this.append(t)},this)}this.trigger("rendered");return this},append:function(e){this.$el.append(e.render().el);return this},remove:function(){this.purgeItemViews();Backbone.View.prototype.remove.apply(this,arguments)},purgeItemViews:function(){_.each(this.itemViews,function(e){if(e){e.trigger("remove");e.remove()}},this);this.itemViews=[]}});Backbone.ListItemView=Backbone.View.extend({tagName:"li",initialize:function(e){this.listenTo(this.model,"remove",this.remove)},render:function(){this.$el.html(this.template(this.model.toJSON()));return this}})

// Example

var contacts = new Backbone.Collection([
    {name: "Tim Schneider", age: 35},
    {name: "John Black", age: 26},
    {name: "Jordan Spark", age: 41},
    {name: "Stella Brown", age: 21},
    {name: "Dallas Smith", age: 24},
    {name: "Ashton Kooper", age: 34},
]);

var ContactsListItemView = Backbone.ListItemView.extend({
    render: function(){
        var compiled = _.template("<div><%= name %></div><div><%= age %> years old</div>");
        var html = compiled(this.model.toJSON());
        this.$el.html(html);
        return this;
    }
});

var contactsListView  = new Backbone.ListView({ 
  collection: contacts, 
  itemView: ContactsListItemView 
});

$('#list-wrapper').html(contactsListView.render().el);