backbone.js & underscore.js

April 16th, 2014

Hau Nguyen

&

DESIGNVELOPER

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

What is Backbone.js and Why Learn It ?What is Backbone ?

- Backbone.js is a JavaScript client-side (front-end) framework that helps to organize your code and makes it easier for you to develop single-page web applications

- Gives structure to web applications

- 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

Why do you need Backbone ?

- Develop single-page web applications

- Complex JavaScript web applications

- More organized

- Eschewing the old way of having all of your JavaScript code mixed with HTML

- Separation of concerns (where the logic, the data—model—and the presentation are sufficiently decoupled).


UNDERSCORE.JS

- Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects

- Collections: each, map, find, filter, where, findWhere, toArray,...

- Arrays: first, last, indexOf, range, rest,…

- Functions: bind, bindAll, once, after,…

- Objects: keys, values, invert, extend, functions, is{Null, Number, String,…},

- Utility: noConflict, random, uniqueId, result,…

- Documentation

- http://underscorejs.org/

http://underscorejs.org/




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.

- Events: on object.on(event, callback, [context]) - Alias: bind

- Example: var dsvMember = {name: “Hau Nguyen”};

_.extend(dsvMember, Backbone.Events);

dsvMember.on(“change:name", function(obj, name) {

obj.name = name;

alert(obj.name);

});

object.trigger(“change:name", dsvMember, “ Nguyen Le Trung Hau");


Backbone.Events

- Events: off object.off([event], [callback], [context]) - Alias: unbind

- Example:

object.off("change", onChange);

object.off(“click");

object.off(null, onClick);

object.off();


Backbone.Events

- Events: ListenTo object.listenTo(other, event, callback)

Tell an object to listen to a particular event on an other object.

Example:

view.listenTo(model, 'change', view.render);


Backbone.Events

- Events: stopListening object.stopListening([other], [event], [callback])

Tell an object to stop listening to events.

StopListening with no arguments to have the object remove all of its registered callbacks

- Example:

view.stopListening();

view.stopListening(model);


Backbone.EventsCatalog 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_or_collection, xhr, options) — when a model or collection has started a request to the server.

- "sync" (model_or_collection, resp, options) — when a model or collection has been successfully synced with the server.

- "error" (model_or_collection, resp, options) — when model's or collection's request to remote server has failed.

- "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" (route, params) — Fired by the router when any route has been matched.

- "route" (router, route, params) — Fired by history 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- What is Model ?

- Models are the heart of any JavaScript application

- Containing the interactive data.

- Example:

- Person = Backbone.Model.extend({

initialize: function(){

alert(“init a model in backbone");

}

});

var person = new Person;

initialize() is triggered whenever you create a new instance of a model( models, collections and views work the same way )


Backbone Model

- Setting attribute – use model.set()

- Person = Backbone.Model.extend({


alert(" init a model in backbone ");

}

});

var person = new Person({ firstname: “Hau”, lastname: “Nguyen”});

var person = new Person();

person.set({firstname: “Hau”, lastname: “Nguyen”});

- Getting attribute – use model.get():

- var person = new Person({firstname: “Hau”, lastname: “Nguyen”});

var firstname = person.get(" firstname ");

var lastname = person.get(" lastname ");


Backbone View

- Can be used with any JavaScript templating library : underscore.js template, mustache template.

- Organize your interface into logical views

- View can be updated independently when the model changes, without refresh the page

- Example:- DemoView = Backbone.View.extend({


alert(“The view have just init");

}

});

var demo_view = new DemoView ();


Backbone View

- The "el" property - view.el

- Every View has an "el" property

- $.el is a cached jQuery object for the view's element – view.$el

- Example:

- var DemoView = Backbone.View.extend({

tagName: "div",

className: "document",

render: function() {

this.$el.append("<a href='www.designveloper.com'>click here</a>");

window.$('body').append(this.el);

}

});


Backbone View

- setElement - view.setElement(element)

- Apply a Backbone view to a different DOM element

- view.$(selector)

- Example:


tagName: "div",



this.$el.find(“.company”).html(“DSV JSC”);


}

});


Backbone View

- Loading a template


- view.$(selector)

- Example:


tagName: "div",





}

});


Backbone View



- view.$(selector)

- Example:


tagName: "div",





}

});


Backbone Collection



- view.$(selector)

- Example:


tagName: "div",





}

});

backbone.js & underscore.js

Technology