BACKBONE.JS & UNDERSCORE.JS

April 16th, 2014
Hau Nguyen
&
DESIGNVELOPER

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).
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

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/

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.Events
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_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.Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

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 ");Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

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
 Example:
tagName: "div",
}
});

Backbone Collection
 setElement - view.setElement(element)
 Example:
tagName: "div",
}
});

BACKBONE.JS & UNDERSCORE.JS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to BACKBONE.JS & UNDERSCORE.JS

Similar to BACKBONE.JS & UNDERSCORE.JS (20)

More from Designveloper

More from Designveloper (20)

Recently uploaded

Recently uploaded (20)

BACKBONE.JS & UNDERSCORE.JS