All notes


Backbone.js uses the templating engine of Underscore.js since Backbone has a hard dependency on Underscore. using templates in backboneJS. 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"


var object = {};

_.extend(object, Backbone.Events);

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

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


bind, bindAll 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!


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/ 



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).


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.