Google Reader

var Movie = Backbone.Model.extend({ 
    validate: function (attrs) { 
        if (attrs.title) { 
            if (!_.isString(attrs.title) || attrs.title.length === 0 ) { 
                return "Title must be a string with a length"; 
            } 
        } 
    } 
}); 

// define our collection 
var MovieLibrary = Backbone.Collection.extend({ 
    model: Movie, 
    initialize: function () { 
        // somthing 
    } 
}); 
 
var library = new MovieLibarary(); 
 
// you can add stuff by creating the model first 
var dumb_and_dumber = new Movie({ 
    title: "Dumb and Dumber", 
    format: "dvd" 
}); 
 
library.add(dumb_and_dumber); 
 
// or even by adding the raw attributes 
library.add({ 
    title: "The Big Lebowski", 
    format: "VHS" 
}); 

var MovieView = Backbone.View.extend({ 
    initialize: function (args) { 
        _.bindAll(this, 'changeTitle'); 
        this.model.bind('change:title', this.changeTitle); 
    }, 
 
    events: { 
        'click .title': 'handleTitleClick' 
    }, 
 
    render: function () { 
        // "ich" is ICanHaz.js magic 
        this.el = ich.movie(this.model.toJSON()); 
        return this; 
    }, 
 
    changeTitle: function () { 
        this.$('.title').text(this.model.get('title')); 
    }, 
 
    handleTitleClick: function () { 
        alert('you clicked the title: ' + this.model.get('title')); 
    } 
}); 

var MovieAppController = { 
    init: function (spec) { 
        // default config 
        this.config = { 
            connect: true 
        }; 
        // extend our default config with passed in object attributes 
        _.extend(this.config, spec); 
        this.model = new MovieAppModel({ 
            nick: this.config.nick, 
            account: this.config.account, 
            jid: this.config.jid, 
            boshUrl: this.config.boshUrl 
        }); 
        this.view = new MovieAppView({model: this.model}); 
        // standalone modules that respond to document events 
        this.sm = new SoundMachine(); 
        return this; 
    }, 
 
    // any other functions here should be events handlers that respond to 
    // document level events. In my case I was using this to respond to incoming XMPP 
    // events. So the logic for knowing what those meant and creating or updating our 
    // models and collections lived here. 
    handlePubSubUpdate: function () {}; 
}; 

var MovieAppModel = Backbone.Model.extend({ 
    initialize: function () { 
        // init and store our MovieCollection in our app object 
        this.movies = new MovieCollection(); 
    } 
}); 

var MovieAppView = Backbone.View.extend({ 
    initialize: function () { 
        // this.model refers the the model we pass to the view when we 
        // first init our view. So here we listen for changes to the movie collection. 
        this.model.movies.bind('add', this.addMovie); 
        this.model.movies.bind('remove', this.removeMovie); 
    }, 
 
    events: { 
        // any user events (clicks etc) we want to respond to 
    }, 
 
    // grab and populate our main template 
    render: function () { 
        // once again this is using ICanHaz.js, but you can use whatever 
        this.el = ich.app(this.model.toJSON()); 
        // store a reference to our movie list 
        this.movieList = this.$('#movieList'); 
        return this; 
    }, 
 
    addMovie: function (movie) { 
        var view = new MovieView({model: movie}); 
        // here we use our stored reference to the movie list element and 
        // append our rendered movie view. 
        this.movieList.append(view.render().el); 
    }, 
 
    removeMovie: function (movie) { 
        // here we can use the html ID we stored to easily find 
        // and remove the correct element/elements from the view if the 
        // collection tells us it's been removed. 
        this.$('#' + movie.get('htmlId')).remove(); 
    } 
});