Backbone.js

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Backbone.Events

Events is a module that can be mixed in to any object, giving the object the ability to bind and trigger custom named events.

var object = {};

_.extend(object, Backbone.Events);

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

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

Catalog of Events 

• "add" (model, collection, options) — when a model is added to a collection.
• "remove" (model, collection, options) — when a model is removed from a collection.
• "reset" (collection, options) — when the collection's entire contents have been replaced.
• "sort" (collection, options) — when the collection has been re-sorted.
• "change" (model, options) — when a model's attributes have changed.
• "change:[attribute]" (model, value, options) — when a specific attribute has been updated.
• "destroy" (model, collection, options) — when a model is destroyed.
• "request" (model, xhr, options) — when a model (or collection) has started a request to the server.
• "sync" (model, resp, options) — when a model (or collection) has been successfully synced with the server.
• "error" (model, xhr, options) — when a model's save call fails on the server.
• "invalid" (model, error, options) — when a model's validation fails on the client.
• "route:[name]" (params) — Fired by the router when a specific route is matched.
• "route" (router, route, params) — Fired by history (or router) when any route has been matched.
• "all" — this special event fires for any triggered event, passing the event name as the first argument.

Backbone.Model

extendBackbone.Model.extend(properties, [classProperties]) 

To create a Model class of your own, you extend Backbone.Model and provide instance properties, as well as optional classProperties to be attached directly to the constructor function.

var Note = Backbone.Model.extend({

  initialize: function() { ... },

  author: function() { ... },

  coordinates: function() { ... },

  allowedToEdit: function(account) {
    return true;
  }

});

var PrivateNote = Note.extend({

  allowedToEdit: function(account) {
    return account.owns(this);
  }

});

Underscore Methods

Backbone proxies to Underscore.js to provide 6 object functions onBackbone.Model.

keys
values
pairs
invert
pick
omit

Backbone.Collection

extendBackbone.Collection.extend(properties, [classProperties]) 

To create a Collection class of your own, extend Backbone.Collection, providing instance properties, as well as optional classProperties to be attached directly to the collection's constructor function.

Underscore Methods 

Backbone proxies to Underscore.js to provide 28 iteration functions on Backbone.Collection.

Backbone.Router

extendBackbone.Router.extend(properties, [classProperties]) 

Get started by creating a custom router class. Define actions that are triggered when certain URL fragments are matched, and provide a routes hash that pairs routes to actions.

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    ...
  },

  search: function(query, page) {
    ...
  }

});

Backbone.history

History serves as a global router (per frame) to handle hashchange events orpushState, match the appropriate route, and trigger callbacks. You shouldn't ever have to create one of these yourself since Backbone.history already contains one.

Backbone.sync

Backbone.sync is the function that Backbone calls every time it attempts to read or save a model to the server. By default, it uses jQuery.ajax to make a RESTful JSON request and returns a jqXHR.

The default sync handler maps CRUD to REST

• create → POST   /collection
• read → GET   /collection[/id]
• update → PUT   /collection/id
• delete → DELETE   /collection/id

Backbone.View

extendBackbone.View.extend(properties, [classProperties]) 

Get started with views by creating a custom view class. You'll want to override therender function, specify your declarative events, and perhaps the tagName,className, or id of the View's root element.

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() {
    ...
  }

});

Some basic idea about Backbone.js

What is Backbone.js?

            Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

What is a view?

              Backbone views are used to reflect what our applications’ data models look like. They are also used to listen to events and react accordingly.

SearchView = Backbone.View.extend({

initialize: function(){

alert("Alerts hi");

}

});

var search_view = new SearchView;

The “el” property

              The “el” property references the DOM object created in the browser. Every Backbone.js view has an “el” property, and if it not defined, Backbone.js will construct its own, which is an empty div element.Let us set our view’s “el” property to div#search_container, effectively making Backbone.View the owner of the DOM element.

<div id="search_container"></div>

<script type="text/javascript">

SearchView = Backbone.View.extend({

initialize: function(){

alert("Alerts hi");

}

});

var search_view = new SearchView({ el: $("#search_container") });

</script>

What is a model?

              Models are the heart of any JavaScript application, containing the interactive data as well as

a large part of the logic surrounding it: conversions, validations, computed properties, and

access control.

Person = Backbone.Model.extend({

initialize: function(){

alert("Welcome to this world");

}

});

var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});

What is a collection?

             Backbone collections are simply an ordered set of models. 

var Song = Backbone.Model.extend({

initialize: function(){

console.log("Music is the answer");

}

});

var Album = Backbone.Collection.extend({

model: Song

});

What is a router?

       Backbone routers are used for routing our applications URL’s when using hash tags(#).Defined routers should always contain at least one route and a function to map the particular route to.Also note that routes intepret anything after “#” tag in the url.