• Event
• Model
• Collection
• View
• Router
• History
• Sync

Underscore ~ underscorejs.org

jQuery ~ jquery.com

#mimimi não use jQuery... ( http://goo.gl/QR8e13 )

Alternativas:

Lo-Dash ~ lodash.com

Zepto ~ zeptojs.com

  var Book = Backbone.Model.extend({
      defaults: {
          title: '',
          author: ''
      }
  });

  var Book = Backbone.Model.extend({});

  var book1 = new Book({ title: 'Full Stack Web Development with Backbone.js' });

  console.log( book1.get('title') );
  // => 'Full Stack Web Development with Backbone.js'

  book1.set('title', 'Backbone.js Cookbook');

  console.log( book1.get('title') );
  // => 'Backbone.js Cookbook'

  book1.set({
      title: 'Building Backbone Plugins',
      author: 'Derick Bailey'
  });

  book1.toJSON();
  // => Object {title: "Building Backbone Plugins", author: "Derick Bailey"}

  var Library = Backbone.Collection.extend({
      model: Book
  });

Instanciando e populando:

  var MyLibrary = new Library([
      { title: 'Developing Backbone.js Applications', author: 'Addy Osmani' },
      { title: 'Full Stack Web Development with Backbone.js ', author: 'Patrick Mulder' },
      { title: 'Building Backbone Plugins', author: 'Derick Bailey' }
  ]);

  MyLibrary.at(0).toJSON();
  // => 'Developing Backbone.js Applications'

  MyLibrary.pluck('author');
  // => Array [ "Addy Osmani", "Patrick Mulder", "Derick Bailey" ]

  MyLibrary.where({ author: 'Addy Osmani' });
  // => 'Developing Backbone.js Applications'

  MyLibrary.length
  // => 3

  var BookView = Backbone.View.extend({
      tagName: 'div',

      className: 'book-item',

      events: {
          'click .open': 'openClicked'
      },

      initialize: function() {
          console.log('The View has created!');
      },

      openClicked: function(e) {
          console.log( $(e.target) );
      }
  });

  var theBook = new BookView();

  // => 'The View has created!'

  var BookView = Backbone.View.extend({
      // ... tagName, className, events ...
  
      template: _.template( [
          '<b>Title:</b> <%= title %> <br>',
          '<b>Author:</b> <%= author %> <hr>' 
      ].join('') ),
  
      render: function() {
          var data = this.model.toJSON();
          this.$el.html( this.template( data ) );
          return this;
      },

      // ... initialize and other methods ...
  });

  var theBookView = new BookView({ model: theBookModel });

  $('body').html( theBookView.render().el );

  var theBookModel = new Book({ 
      title: 'Backbone.Marionette.js: A Gentle Introduction', 
      author: 'David Sulc' 
  });

Interessante... show me the code!

  var LibraryView = Backbone.View.extend({
      tagName: 'ul',

      className: 'books-list',

      render: function() {
          this.collection.each(function(book) {
              var bookItemView = new BookView({ model: book });
              this.$el.append( bookItemView.render().el );
          }, this);

          return this;
      }
  });

  var BooksCollection = new Library([
      { title: 'Developing Backbone.js Applications', author: 'Addy Osmani' },
      { title: 'Full Stack Web Development with Backbone.js ', author: 'Patrick Mulder' },
      { title: 'Building Backbone Plugins', author: 'Derick Bailey' },
      { title: 'Backbone.Marionette.js: A Gentle Introduction', author: 'David Sulc' }
  ]);

  
  var theLibraryView = new LibraryView({ collection: BooksCollection });

  
  $('body').html( theLibraryView.render().el );

  var Library = Backbone.Collection.extend({

      model: Book,

      resetSelected: function() {
          this.each(function(model) {
              model.set({ selected: false });
          });
      },

      selectByCID: function(cid) {
          this.resetSelected();

          var book = this.get(cid);
          book.set('selected', true);

          return book.cid;
      }

  });

      events: {
          'click': 'selectBook'
      },

      initialize: function() {
          this.listenTo( this.model, 'change:selected', this.render );
      },

      render: function() {
          var data = this.model.toJSON();

          this.$el.html( this.template( data ) );
          this.$el.toggleClass( 'selected', this.model.get('selected') );
          
          return this;
      },

      selectBook: function(e) {
          if(!this.model.get('selected')) {
              this.model.collection.resetSelected();
              this.model.collection.selectByCID( this.model.cid );
          }
      }

  });

      // ... tagName, className, template ...

Click!

Change de View!

  
  var AppRouter = Backbone.Router.extend({

      routes: {
          '': 'showHome',
          'book/:id' : 'showBook'
      },

      showBook: function(id) {
          // ... get the book by id
          // ... create and render a view
          // etc
      }

  });

  
  $(function() {
      var appRouter = new AppRouter();
      Backbone.history.start();
  });