All notes
Backb

JST

Backbone.js uses the templating engine of Underscore.js since Backbone has a hard dependency on Underscore. 9bitStudios.com: using templates in backboneJS.

underscoreJS.org: template.

Execute arbitrary JavaScript code, with <% … %>.
To interpolate values, using <%= … %>.
If you wish to interpolate a value, and have it be HTML-escaped, use <%- … %>.


var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
// "hello: moe"

var template = _.template("<b><%- value %></b>");
template({value: '<script>'});
// "<b>&lt;script&gt;</b>"

// You can also use print from within JavaScript code. This is sometimes more convenient than using <%= ... %>.
var compiled = _.template("<% print('Hello ' + epithet); %>");
compiled({epithet: "stooge"});
// "Hello stooge"

Events



var object = {};

_.extend(object, Backbone.Events);

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

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

Functions

bind, bindAll

bigBinary.com: bind and bindALl in backbone.



##### Why apply is needed

var func = function beautiful(){
  alert(this + ' is beautiful');
};
func(); // [object window] is beautiful
func.apply('Internet'); // Internet is beautiful

function Developer(skill) {
  this.skill = skill;
  this.says = function(){
    alert(this.skill + ' rocks!');
  }
}
var john = new Developer('Ruby');
john.says(); // Ruby rocks!
var func = john.says;
func();// undefined rocks!
func.apply(john); // Ruby rocks!

##### bind, bindAll

# bind internally uses apply to set this to the second parameter we passed while invoking bind.
# Notice that bind does not change existing function. It returns a new function and that new function should be used.
var func = _.bind(john.says, john);
func();// Ruby rocks!

# bindAll internally calls bind and it overrides the existing attribute with the function returned by bind.
# So in bindAll we do not have to worry about the returned value.
_.bindAll(john, 'says');
var func = john.says;
func(); //Ruby rocks!

Model

urlRoot, url

SO: backboneJS models and collection url's.



var Book = Backbone.Model.extend({urlRoot: 'books' });
var book = new Book({id: 1});
book.fetch();  // will get /books/1

var Book = Backbone.Model.extend({});
var book = new Book({url: 'books/1'});
book.fetch();  // will get /books/1


var Books = Backbone.Collection.extend({model: Book});
var books = new Books({ /*....*/ });
books.fetch(); // will get /books/ 

View

events

Format: {"event selector": "callback"}. The callback may be either the name of a method on the view, or a direct function body. Omitting the "selector" causes the event to be bound to the view's root element (this.el).

extend

Backbone.View.extend(properties, [classProperties])
Optional "classProperties" is to be attached directly to the constructor function.


var DocumentRow = Backbone.View.extend({

  tagName: "li",
  className: "document-row",

  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  },

  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  },
  render: function() {
    ...
  }
});
// Properties like tagName, id, className, el, and "events" may also be defined as a function, if you want to wait to define them until runtime.