BB: Collection View

http://codebeerstartups.com/2012/12/9-collection-views-in-backbone-js-learning-backbone-js/

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<div class="js-ctn"></div>

<script type="text/html" class="tmpl-table">
	<table class="js-region--table"></table>
	<button class="js-cancel">Cancel</button>
</script>

<script type="text/html" class="tmpl-row">
	<p><%= id %></p>
    <h1>Hey, <%= name %></h1>
</script>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500);

body {
    font-family: Roboto;
    color: #191919;
}

a {
    color: #191919;
}

JavaScript

console.clear();

// Dummy Data
var data = [
    {
        "id": 1,
        "name": "lorem ipsum"
	}, {
        "id": 2,
        "name": "lorem ipsum"
    }
]


// Classes
var TableRow = Backbone.Model.extend({
	defaults: {
    	selected: false
    },
    
    // model.toggle('selected') -- Sets selected to true
    toggle: function(attr, options) {
        options = options ? _.clone(options) : {};
        return this.set(attr, !this.get(attr), options);
    }
});

var TableCollection = Backbone.Collection.extend({

    model: TableRow
});

var TableView = Backbone.View.extend({
        
    template: _.template( $('.tmpl-table').html() ),
     
    render: function() {
		this.$el.html(this.template());
        
        _.defer(function() {
        	this.afterRender();
        }.bind(this));
        
        return this;
    },
    
    afterRender: function() {
    	this.collection.each(this.addRow, this);
        
        return this;
    },
    
    addRow: function(model) {
                
        var tableRow = new TableRowView({
            model: model
        });
     	
        this.$('.js-region--table').prepend( tableRow.render().el )
    }
});

var TableRowView = Backbone.View.extend({
	
    tagName: 'tr',
    
    events: {
    	'click': 'onRowClick'
    },
    
    template: _.template( $('.tmpl-row').html() ),
    
    initialize: function() {
    	this.listenTo(this.model, 'change:selected', function(model) {
        	console.log('Model changed', model.toJSON());
        });
    },
    
    render: function() {
        this.$el.html( this.template( this.model.toJSON() ) );
        
        return this;
    },
    
    // on row select update 
    onRowClick: function(event) {
    	event.preventDefault();
        
        this.model.toggle('selected');
    }
});

// Setup
var tableCollection = new TableCollection(data, {parse:true});
var tableView = new TableView({
	collection: tableCollection
});

// Add to...