How do we achieve dynamism?

The best thing about JavaScript is its implementation of functions.

jQuery

$(function () {

    // do stuff after DOM has loaded

});
        

$.ajax({
    url: "/myurl",
    beforeSend: function ( xhr ) {
        xhr.overrideMimeType("text/plain;");
    },
    success: function(response) {
        // I AM INVINCIBLE!
    },
    error: function(response) {
        // What, I FAILED ? :O
    }
})
        

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.

6.3kb

BackboneJS Constructs

• Model (and Collection): Application (domain) data objects that are retrieved from and persisted to the server
• View: HTML presentation of the data stored in the models and DOM 'controller'
• Router: Controller that saves the state of the application via a url hash
• History: Global router (per frame) to handle hashchange events or pushState
• Events: Module that can be mixed in to any object, giving the object the ability to bind and trigger custom named events.
• Sync: Manages actual persistence by a "function that Backbone calls every time it attempts to read or save a model to the server."

How to map Backbone to MVC

Model

var CallItem = Backbone.Model.extend({
    urlRoot:"/call"
});
var myCall = new CallItem();
mycall.save({
    name: "Leia",
    phone: "1-213-345-2343",
    call_on: "2013-03-10"
});
        

Collection

var CallList = Backbone.Collection.extend({
    model: CallItem,
    url: '/calls'
});
var myCallList = new CallList();
myCallList.fetch();
        

View

var CallItemView = Backbone.View.extend({
    events:{
        "click .edit" : "render"
    },
    initialize: function(){
        this.model.bind("change", this.render, this);
    },
    render: function(event) {
        this.$el.html(this.template(this.model.attributes));
        return this; // allow chaining
    }
});
var myCallItemView = new CallItemView({
    model: myCall,
    el: "#my-call-view"
});
        

Router

var CallRouter = Backbone.Router.extend({
    routes: {
        "help": "help",                   // #help
        "call/:id": "call",               // #call/10
        "search/:date(/p:page)": "search" // #search/2013-03-10 or #search/2013-03-10/2
    },
    help: function() {
            //...your function
    }
});
$(function(){
    new CallRouter();
    Backbone.history.start({pushState: true});
});
        

Putting it all Together

            src/
                js/
                    init.js
                    callButlerApp.js
                routers/
                models/
                    callItem.js
                    callList.js
                views/
                    callItem.js
                    callDetail.js