gistfile1.js

    (function($) {    
        var ItemView = function(fundraiser) {
            this.fundraiser = fundraiser;
            this.template   = _.template(document.getElementById('widget-item').innerHTML);
            
            this.render = function() {
                return this.template(this.fundraiser);
            }
            
            return this;
        }
            
        var RowView = function(count) {
            this.count    = count;
            this.template = _.template(document.getElementById('widget-row').innerHTML);
            this.views    = [];
            
            this.insertAt = function(index, itemView) {
                this.views[index] = itemView;
            }
            
            this.render = function() {
                return this.template({count: this.count});
            }
            
            this.renderChildren = function() {
                return _.reduce(this.views, function(compiled, view) {
                    return compiled + view.render();
                }, "");
            }
            
            return this;
        }
        
        var RowViews = function(element) {
            this.element = element;
            this.views   = [];
            
            this.at = function(index) {
                return this.views[index];
            }
            
            this.add = function() {
                var view = new RowView(this.views.length + 1);                
                this.element.innerHTML += view.render();
                this.views.push(view);          
            }
            
            return this;
        }
        
        var rows = new RowViews(document.getElementById('lb-data'));
        
        var Column = function(options) {
            this.api      = options.api;
            this.position = options.position;
            this.query    = options.query;
            
            this.fetch = function() {
                var $this = this;
                $this.api.topTen($this.query, function(fundraisers) {
                    _.each(fundraisers, function(fundraiser, index) {
                        if (!rows.at(index)) rows.add();
                        var row = rows.at(index);
                        row.insertAt($this.position, new ItemView(fundraiser));
                        rows.element.children[row.count -1].innerHTML = row.renderChildren();
                    });
                });
            }
            
            return this;
        }        
        
        var Table = function() {
            this.columns = [];
                        
            this.fetch = function() {
                _.each(this.columns, function(column) { column.fetch(); });
            }
            
            this.push = function(api, query) {
                var column = new Column({
                    api: api,
                    position: this.columns.length,
                    query: query
                });
                this.columns.push(column);
            }
            
            return this;
        }
        
        var table = new Table();
        table.push(new EverydayHero('event', 'bikems2011', {host: 'api.everydayhero.co.nz'}), 'individual');
        table.push(new EverydayHero('event', 'bikems2011', {host: 'api.everydayhero.co.nz'}), 'team');
        table.push(new EverydayHero('event', 'bikems2011', {host: 'api.everydayhero.co.nz'}), 'individual');
        table.push(new EverydayHero('event', 'bikems2011', {host: 'api.everydayhero.co.nz'}), 'individual');
        table.fetch();
    })(window);