AN INTERLUDE ON JAVASCRIPT EVOLUTION // kindergarten JS function kissButt(who) { switch (who) { case 'boss': puckerUp('big'); break; case 'meter maid': puckerUp('just a little'); break; default: takeAHike(); break; } }
SO BACKBONE... Pretty simple system: Views, Models, Events, Collections Sprinkle in as little or as much as you like Some needed structure to mountains of JS Very agnostic about DOM util libs, template libs, code patterns Backbone != jQuery Examples of using it big players
BACKBONE MODELS var Book = Backbone.Model.extend({ defaults: { 'inStock': true }, initialize: function() { // runs when model constructed }, validate: function(attrs) { if (attrs.inStock === false) return 'No can do buddy-ro!' if (attrs.price <= 0) return "We're not running a charity here." } }); var fiftyShadesOfJavascript = new Book({ price: 14.99, title: '50 Shades of Javascript' }); fiftyShadesOfJavascript.set('price', -5); // validation error
BACKBONE COLLECTIONS AND EVENTS var BookCollection = Backbone.Collection.extend({ model: Book }); var library = new BookCollection(); library.on('add', function(book) { var bookview = new BookView({ model: book }); $('.content').append(bookview.render().$el); }); library.add(fiftyShadesOfJavascript);
BACKBONE & APIS var Book = Backbone.Model.extend({ ... url: function() { if (this.id) return '/books/' + this.id; // HTTP PUT return '/books/'; // HTTP POST } }); var fifty = new Book({ price: 14.99, title: '50 Shades of Javascript' }); fifty.set('title', '50 Shades: Improved With 1 More Shade!'); fifty.save(); // triggers ajax POST to model.url()
BACKBONE & APIS var BookCollection = Backbone.Collection.extend({ model: Book, url: '/books/' }); var library = new BookCollection(); library.fetch(); // HTTP GET all books