Lecture:

overview

Models and Views

Model

  • Data and logic
  • Server
  • Changes

View

  • Renders UI
  • Input and interactivity
  • Updates model

Collections

var Books = Backbone.Collection.extend({
  url: '/books'
});


GET  /books/ .... collection.fetch();
POST /books/ .... collection.create();
GET  /books/1 ... model.fetch();
PUT  /books/1 ... model.save();
DEL  /books/1 ... model.destroy();
// Custom response

{
  "page": 1,
  "limit": 10,
  "total": 2,
  "books": [
    {"id": 1, "title": "Pride and Prejudice"},
    {"id": 4, "title": "The Great Gatsby"}
  ]
}

// Custom parsing
var Books = Backbone.Collection.extend({
  url: '/books',
  parse: function(data) {
    return data.books;
  }
});

View Rendering

Routing with URLs

Backbone.Events

var object = {};

_.extend(object, Backbone.Events);

object.on("alert", function(msg) {
  alert("Triggered " + msg);
});

object.trigger("alert", "an event");

  • "reset" (collection)

  • "sort" (collection)

  • "invalid" (model, error)

  • "request" (model_or_collection, xhr)

  • "sync" (model_or_collection, resp)

  • "error" (model_or_collection, resp)

  • "add" (model, collection)

  • "remove" (model, collection)

  • "update" (collection)

  • "change" (model)

  • "change:[attribute]" (model, value)

  • "destroy" (model, collection)

  • "route:[name]" (params)

  • "route" (route, params)

  • "route" (router, route, params)

  • "all"

Models

  • Create models
  • Attributes
  • Validation
  • Server sync
  • Model events 
  • Model methods

Collections

  • Creating Collections
  • Managing Collections
  • Collections sync
  • Sorting Collections
  • Collection events

Views

  • Creating and Rendering
  • Managing DOM Events
  • Persisting Data

Router

  • Creating Routers
  • Adding Routers
  • Navigating with links

AMD and CommonJS

  • Browserify
  • RequireJS

Plugins

Debugging

Frameworks

THORAX

Projects

Lecture: Backbone.js overview

By Andrew Dacenko

Made with Slides.com

Lecture: Backbone.js overview

  • 1,169

More from Andrew Dacenko