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 ...
UNDERSCORE.JS
 Underscore is a JavaScript library that provides a whole mess of useful
functional programming helpers wit...
Backbone.Events
 Events is a module that can be mixed in to any object, giving the object
the ability to bind and trigger...
Backbone.Events
 Events: off object.off([event], [callback], [context]) - Alias: unbind
 Example:
object.off("change", o...
Backbone.Events
 Events: ListenTo object.listenTo(other, event, callback)
Tell an object to listen to a particular event ...
Backbone.Events
 Events: stopListening object.stopListening([other], [event], [callback])
Tell an object to stop listenin...
Backbone.Events
Catalog of Events
 "add" (model, collection, options) — when a model is added to a collection.
 "remove"...
Backbone Model
 What is Model ?
 Models are the heart of any JavaScript application
 Containing the interactive data.
...
Backbone Model
 Setting attribute – use model.set()
 Person = Backbone.Model.extend({
initialize: function(){
alert(" in...
Backbone View
 Can be used with any JavaScript templating library : underscore.js
template, mustache template.
 Organize...
Backbone View
 The "el" property - view.el
 Every View has an "el" property
 $.el is a cached jQuery object for the vie...
Backbone View
 setElement - view.setElement(element)
 Apply a Backbone view to a different DOM element
 view.$(selector...
Backbone View
 Loading a template
 Apply a Backbone view to a different DOM element
 view.$(selector)
 Example:
 var ...
Backbone View
 setElement - view.setElement(element)
 Apply a Backbone view to a different DOM element
 view.$(selector...
Backbone Collection
 setElement - view.setElement(element)
 Apply a Backbone view to a different DOM element
 view.$(se...
Upcoming SlideShare
Loading in …5
×

BACKBONE.JS & UNDERSCORE.JS

730 views

Published on

Websites: https://www.designveloper.com
Visit our blog: https://www.designveloper.com/blog
Like Facebook page: https://www.facebook.com/designveloper/
Youtube: http://bit.ly/29PTtFS

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
730
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

BACKBONE.JS & UNDERSCORE.JS

  1. 1. April 16th, 2014 Hau Nguyen & DESIGNVELOPER
  2. 2. 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
  3. 3. 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/ Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  4. 4. 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"); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  5. 5. 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(); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  6. 6. 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); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  7. 7. 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); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  8. 8. 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
  9. 9. 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 ) Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  10. 10. Backbone Model  Setting attribute – use model.set()  Person = Backbone.Model.extend({ initialize: function(){ 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
  11. 11. 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({ initialize: function(){ alert(―The view have just init"); } }); var demo_view = new DemoView (); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  12. 12. 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); } }); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  13. 13. Backbone View  setElement - view.setElement(element)  Apply a Backbone view to a different DOM element  view.$(selector)  Example:  var DemoView = Backbone.View.extend({ tagName: "div", className: "document", render: function() { this.$el.find(―.company‖).html(―DSV JSC‖); window.$('body').append(this.el); } }); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  14. 14. Backbone View  Loading a template  Apply a Backbone view to a different DOM element  view.$(selector)  Example:  var DemoView = Backbone.View.extend({ tagName: "div", className: "document", render: function() { this.$el.find(―.company‖).html(―DSV JSC‖); window.$('body').append(this.el); } }); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  15. 15. Backbone View  setElement - view.setElement(element)  Apply a Backbone view to a different DOM element  view.$(selector)  Example:  var DemoView = Backbone.View.extend({ tagName: "div", className: "document", render: function() { this.$el.find(―.company‖).html(―DSV JSC‖); window.$('body').append(this.el); } }); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  16. 16. Backbone Collection  setElement - view.setElement(element)  Apply a Backbone view to a different DOM element  view.$(selector)  Example:  var DemoView = Backbone.View.extend({ tagName: "div", className: "document", render: function() { this.$el.find(―.company‖).html(―DSV JSC‖); window.$('body').append(this.el); } }); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

×