backbone_view.js

/*
 * Refs
 *
 * http://documentcloud.github.com/backbone/
 * http://msdn.microsoft.com/en-us/scriptjunkie/hh377172.aspx
 * http://arturadib.com/hello-backbonejs/
 * http://stackoverflow.com/questions/5629972/integrating-json-feed-with-backbone-js
 * http://stackoverflow.com/questions/6048480/backbone-js-fetch-problem-cant-refresh-data-immediately
 * http://documentcloud.github.com/backbone/docs/todos.html
 *
 */

(function() {

    // Models
    var Schools = Backbone.Model.extend();

    // Collections
    var SchoolList = Backbone.Collection.extend({
        model: Schools,
        url: '/js/testdata.json'
    });

    // Views
    var SchoolRow = Backbone.View.extend({

        tagName: 'tr',
        matchingSchools: $('#school_row_template').html(),

        initialize: function(){
            this.delegateEvents();
        },

        events: {
            'click button.compare': 'addSchoolToCompare'
        },

        render: function(){
            var tmpl = _.template(this.matchingSchools, this.model.attributes );
            $(this.el).html(tmpl);
            return this;
        },

        addSchoolToCompare: function(){
            console.log(this.model.attributes);
        }

    });

    var Schools = Backbone.View.extend({

        el: $('#ridley_schools table'),
        collection: new SchoolList(),

        initialize: function(){
            _.bindAll(this, 'render'); // render on all events
            this.collection.bind('reset', this.render);
            this.collection.fetch();
        },

        render: function(){
            var content = [];

            this.collection.each(function(item){
                var row = new SchoolRow({ model: item });
                content.push(row.render().el);
            }, this);

            this.el.append(content);
        }

    });

    var schools = new Schools();

}());