Радослав Станков      OpenFest            05/11/2011Tuesday, November 8, 11
Кой съм аз?                @rstankov                http://rstankov.com                http://github.com/rstankovTuesday, ...
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Browser                                  Controller                          Model                View                    ...
Browser                                  Controller                          Model                View                    ...
Browser                                  Controller                          Model                View                    ...
Browser                                  Controller                          Model                View                    ...
Browser                                  Controller                          Model                View                    ...
Browser                                  Controller                          Model                View                    ...
Browser                                  Controller                          Model                View                    ...
Browser                                  Controller                          Model                View                    ...
Browser                                  Controller                          Model                View                    ...
Browser                                  Controller                          Model                View                    ...
Browser                                  Controller                          Model                View                    ...
Browser                                  Controller                          Model                View                    ...
Browser                                  Controller                          Model                View                    ...
Browser                          Dom                          View                          ModelTuesday, November 8, 11
Browser                          Dom                          View                          ModelTuesday, November 8, 11
Browser                          Dom                          View                          ModelTuesday, November 8, 11
Browser                          Dom                          View                          ModelTuesday, November 8, 11
Browser                          Dom                          View                          ModelTuesday, November 8, 11
Browser                          Dom                          View                          ModelTuesday, November 8, 11
Browser                          Dom                          View                          ModelTuesday, November 8, 11
Browser                          Dom                          View                          ModelTuesday, November 8, 11
Browser                          Dom                          View                          ModelTuesday, November 8, 11
Backbone.EventsTuesday, November 8, 11
var object = {};        $.extend(object, Backbone.Events);        object.bind(eventName, function() {          console.log...
var object = {};        $.extend(object, Backbone.Events);        object.bind(eventName, function() {          console.log...
var object = {};        $.extend(object, Backbone.Events);        object.bind(eventName, function() {          console.log...
var object = {};        $.extend(object, Backbone.Events);        object.bind(eventName, function() {          console.log...
var object = {};        $.extend(object, Backbone.Events);        object.bind(eventName, function() {          console.log...
Backbone.ModelTuesday, November 8, 11
var Person = Backbone.Model.extend({       initialize: function(){         console.log("Im alive!");       }     });     n...
var Person = Backbone.Model.extend({       initialize: function(){         console.log("Im alive!");       }     });     n...
var Person = Backbone.Model.extend({       initialize: function(){         console.log("Im alive!");       }     });     n...
var Person = Backbone.Model.extend({});     var me = new Person({name: Radoslav});     me.get(name);                      ...
var Person = Backbone.Model.extend({});     var me = new Person({name: Radoslav});     me.get(name);                      ...
var Person = Backbone.Model.extend({});     var me = new Person({name: Radoslav});     me.get(name);                      ...
var Person = Backbone.Model.extend({});     var me = new Person({name: Radoslav});     me.get(name);                      ...
var Person = Backbone.Model.extend({});     var me = new Person({name: Radoslav});     me.get(name);                      ...
var Person = Backbone.Model.extend({       defaults: {         name: John,         lastName: Doe,       }     });     var ...
var Person = Backbone.Model.extend({       defaults: {         name: John,         lastName: Doe,       }     });     var ...
var Person = Backbone.Model.extend({       defaults: {         name: John,         lastName: Doe,       }     });     var ...
var Person = Backbone.Model.extend({       defaults: {         name: John,         lastName: Doe,       }     });     var ...
var Calculator = Backbone.Model.extend({       defaults: {          value: 0       },       value: function(){          re...
var Calculator = Backbone.Model.extend({       defaults: {          value: 0       },       value: function(){          re...
var Calculator = Backbone.Model.extend({       defaults: {          value: 0       },       value: function(){          re...
var Calculator = Backbone.Model.extend({       defaults: {          value: 0       },       value: function(){          re...
var Calculator = Backbone.Model.extend({       defaults: {          value: 0       },       value: function(){          re...
var cal = new Calculator();     cal.bind(change:value, function(model, value){       console.log(value);     });     cal.b...
var cal = new Calculator();     cal.bind(change:value, function(model, value){       console.log(value);     });     cal.b...
var cal = new Calculator();     cal.bind(change:value, function(model, value){       console.log(value);     });     cal.b...
var cal = new Calculator();     cal.bind(change:value, function(model, value){       console.log(value);     });     cal.b...
var cal = new Calculator();     cal.bind(myEvent, function(){       console.log(KaBoom....);     });     cal.trigger(myEve...
var Product = Backbone.Model.extend({       urlRoot: /products     });     var chair = new Product({       name: chair,   ...
var Product = Backbone.Model.extend({  url: function(){    return /products/ + (this.isNew() ?  : this.id);  }});var chair...
http://documentcloud.github.com/backbone/#Model-saveTuesday, November 8, 11
И още...                    • validate                    • escape                    • has                    • unset    ...
Backbone.ViewTuesday, November 8, 11
Tuesday, November 8, 11
var UserNameView = Backbone.View.extend({       tagName:   input,       className: string optional,       id:        user-...
var UserNameView = Backbone.View.extend({       tagName:   input,       className: string optional,       id:        user-...
var UserNameView = Backbone.View.extend({       tagName:   input,       className: string optional,       id:        user-...
var UserNameView = Backbone.View.extend({       tagName:   input,       className: string optional,       id:        user-...
var UserNameView = Backbone.View.extend({       tagName:   input,       className: string optional,       id:        user-...
var UserNameView = Backbone.View.extend({       tagName:   input,       className: string optional,       id:        user-...
var UserNameView = Backbone.View.extend({       tagName:   input,       className: string optional,       id:        user-...
var UsersListView = Backbone.View.extend({       el: #users-list     });     var userList = new UsersListView();     conso...
var EditBoxView = Backbone.View.extend({});     var element = $(#edit-box-view).get(0),         editBox = new EditBoxView(...
var DocumentView = Backbone.View.extend({       events: {          dblclick:           open,          click .grid .doc:   ...
var DocumentView = Backbone.View.extend({       events: {          dblclick:           open,          click .grid .doc:   ...
var DocumentView = Backbone.View.extend({       events: {          dblclick:           open,          click .grid .doc:   ...
var DocumentView = Backbone.View.extend({       events: {          dblclick:           open,          click .grid .doc:   ...
var DocumentView = Backbone.View.extend({       events: {          dblclick:           open,          click .grid .doc:   ...
var DocumentView = Backbone.View.extend({       events: {          dblclick:           open,          click .grid .doc:   ...
var DocumentView = Backbone.View.extend({       events: {          dblclick:           open,          click .grid .doc:   ...
<script type="text/template" id="news">       <h1><%= title %></h1>       <time><%= created_at %></time>       <p><%= text...
var NewsView = Backbone.View.extend({       template: _.template($(#news).html()),       render: function() {         this...
var view = new NewsView({       model: {         title: "News Title",         created_at: "Today",         text: "Long tex...
<script type="text/template" id="news">       <h1><%= title %></h1>       <time><%= created_at %></time>       <p><%= text...
<div>       <h1>News Title</h1>       <time>Today</time>       <p>Long text</p>     </div>Tuesday, November 8, 11
View                     Model          DOMTuesday, November 8, 11
View                     Model          DOMTuesday, November 8, 11
View                     Model          DOMTuesday, November 8, 11
View                     Model          DOMTuesday, November 8, 11
View                     Model          DOMTuesday, November 8, 11
View                     Model          DOMTuesday, November 8, 11
View                     Model          DOMTuesday, November 8, 11
View                     Model          DOMTuesday, November 8, 11
View                     Model          DOMTuesday, November 8, 11
View                     Model          DOMTuesday, November 8, 11
View                     Model            DOM                             View 2Tuesday, November 8, 11
View                     Model            DOM                             View 2Tuesday, November 8, 11
View                     Model            DOM                             View 2Tuesday, November 8, 11
View                     Model            DOM                             View 2Tuesday, November 8, 11
View                     Model            DOM                             View 2Tuesday, November 8, 11
View                     Model            DOM                             View 2Tuesday, November 8, 11
View                     Model            DOM                             View 2Tuesday, November 8, 11
View                     Model            DOM                             View 2Tuesday, November 8, 11
View                     Model            DOM                             View 2Tuesday, November 8, 11
View                     Model            DOM                             View 2Tuesday, November 8, 11
View                             View 2                     Model            DOMTuesday, November 8, 11
View                             View 2                     Model            DOM                             View 3Tuesday...
View                             View 2                     Model            DOM                             View 3       ...
View                              View 2                     Model               DOM                              View 3  ...
View                              View 2                     Model               DOM                              View 3  ...
View                              View 2                     Model               DOM                              View 3  ...
View                              View 2                     Model               DOM                              View 3  ...
View                              View 2                     Model               DOM                              View 3  ...
View                              View 2                     Model               DOM                              View 3  ...
View                              View 2                     Model               DOM                              View 3  ...
View                              View 2                     Model               DOM                              View 3  ...
View                              View 2                     Model               DOM                              View 3  ...
DemoTuesday, November 8, 11
var Calculator = Backbone.Model.extend({       defaults: {          value: 0       },       increment: function() {       ...
var ButtonsView = Backbone.View.extend({       events: {          click .plus: plus,          click .minus: minus       },...
var DisplayView = Backbone.View.extend({  initialize: function() {     this.model.bind(change:value, this.render, this);  ...
var cal = new Calculator();     new ButtonsView({model: cal, el: .buttons});     new DisplayView({model: cal, el: .display...
Backbone.CollectionTuesday, November 8, 11
var ProductsCollection = Backbone.Collection.extend({      model: Product    });    var products = new ProductsCollection(...
products.bind(add, function(model) {       console.log(new product added);     });     products.bind(remove, function(mode...
И още...                    • Underscore Methods                    • add / remove / at                    • sort / compar...
Backbone.RouterTuesday, November 8, 11
Tuesday, November 8, 11
var AppRouter = Backbone.Router.extend({       routes: {          pages:            index,          pages/search/:q: searc...
var AppRouter = Backbone.Router.extend({       routes: {          pages:            index,          pages/search/:q: searc...
var AppRouter = Backbone.Router.extend({       routes: {          pages:            index,          pages/search/:q: searc...
var AppRouter = Backbone.Router.extend({       routes: {          pages:            index,          pages/search/:q: searc...
var AppRouter = Backbone.Router.extend({       routes: {          pages:            index,          pages/search/:q: searc...
var AppRouter = Backbone.Router.extend({       routes: {          pages:            index,          pages/search/:q: searc...
var AppRouter = Backbone.Router.extend({       routes: {          pages:            index,          pages/search/:q: searc...
var AppRouter = Backbone.Router.extend({       routes: {          pages:            index,          pages/search/:q: searc...
var AppRouter = Backbone.Router.extend({       routes: {          pages:            index,          pages/search/:q: searc...
var AppRouter = Backbone.Router.extend({       routes: {          pages:            index,          pages/search/:q: searc...
var AppRouter = Backbone.Router.extend({       routes: {          pages:            index,          pages/search/:q: searc...
app.navigate(pages, true);                     app.navigate(pages/search/title, true);                     app.navigate(pa...
site.com/path#pages                     site.com/path#pages/search/title                     site.com/path#pages/3Tuesday,...
Tuesday, November 8, 11
Backbone.history.start({pushState: true});Tuesday, November 8, 11
site.com/path#pages                     site.com/path#pages/search/title                     site.com/path#pages/3Tuesday,...
site.com/path/pages                     site.com/path/pages/search/title                     site.com/path/pages/3Tuesday,...
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
НедостатъциTuesday, November 8, 11
АлтернативиTuesday, November 8, 11
АлтернативиTuesday, November 8, 11
АлтернативиTuesday, November 8, 11
АлтернативиTuesday, November 8, 11
Въпроси?Tuesday, November 8, 11
Благодаря за вниманието          @rstankovTuesday, November 8, 11
Upcoming SlideShare
Loading in...5
×

Backbone.js

9,843

Published on

Backbone.js - Радослав Станков

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,843
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
65
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Backbone.js

  1. 1. Радослав Станков OpenFest 05/11/2011Tuesday, November 8, 11
  2. 2. Кой съм аз? @rstankov http://rstankov.com http://github.com/rstankovTuesday, November 8, 11
  3. 3. Tuesday, November 8, 11
  4. 4. Tuesday, November 8, 11
  5. 5. Tuesday, November 8, 11
  6. 6. Tuesday, November 8, 11
  7. 7. Tuesday, November 8, 11
  8. 8. Tuesday, November 8, 11
  9. 9. Tuesday, November 8, 11
  10. 10. Tuesday, November 8, 11
  11. 11. Tuesday, November 8, 11
  12. 12. Tuesday, November 8, 11
  13. 13. Tuesday, November 8, 11
  14. 14. Tuesday, November 8, 11
  15. 15. Browser Controller Model View СървърTuesday, November 8, 11
  16. 16. Browser Controller Model View СървърTuesday, November 8, 11
  17. 17. Browser Controller Model View СървърTuesday, November 8, 11
  18. 18. Browser Controller Model View СървърTuesday, November 8, 11
  19. 19. Browser Controller Model View СървърTuesday, November 8, 11
  20. 20. Browser Controller Model View СървърTuesday, November 8, 11
  21. 21. Browser Controller Model View СървърTuesday, November 8, 11
  22. 22. Browser Controller Model View СървърTuesday, November 8, 11
  23. 23. Browser Controller Model View СървърTuesday, November 8, 11
  24. 24. Browser Controller Model View СървърTuesday, November 8, 11
  25. 25. Browser Controller Model View СървърTuesday, November 8, 11
  26. 26. Browser Controller Model View СървърTuesday, November 8, 11
  27. 27. Browser Controller Model View СървърTuesday, November 8, 11
  28. 28. Browser Dom View ModelTuesday, November 8, 11
  29. 29. Browser Dom View ModelTuesday, November 8, 11
  30. 30. Browser Dom View ModelTuesday, November 8, 11
  31. 31. Browser Dom View ModelTuesday, November 8, 11
  32. 32. Browser Dom View ModelTuesday, November 8, 11
  33. 33. Browser Dom View ModelTuesday, November 8, 11
  34. 34. Browser Dom View ModelTuesday, November 8, 11
  35. 35. Browser Dom View ModelTuesday, November 8, 11
  36. 36. Browser Dom View ModelTuesday, November 8, 11
  37. 37. Backbone.EventsTuesday, November 8, 11
  38. 38. var object = {}; $.extend(object, Backbone.Events); object.bind(eventName, function() { console.log(1); }); object.bind(eventName, function() { console.log(2); }); object.trigger(eventName); // prints 1 and 2Tuesday, November 8, 11
  39. 39. var object = {}; $.extend(object, Backbone.Events); object.bind(eventName, function() { console.log(1); }); object.bind(eventName, function() { console.log(2); }); object.trigger(eventName); // prints 1 and 2Tuesday, November 8, 11
  40. 40. var object = {}; $.extend(object, Backbone.Events); object.bind(eventName, function() { console.log(1); }); object.bind(eventName, function() { console.log(2); }); object.trigger(eventName); // prints 1 and 2Tuesday, November 8, 11
  41. 41. var object = {}; $.extend(object, Backbone.Events); object.bind(eventName, function() { console.log(1); }); object.bind(eventName, function() { console.log(2); }); object.trigger(eventName); // prints 1 and 2Tuesday, November 8, 11
  42. 42. var object = {}; $.extend(object, Backbone.Events); object.bind(eventName, function() { console.log(1); }); object.bind(eventName, function() { console.log(2); }); object.trigger(eventName); // prints 1 and 2Tuesday, November 8, 11
  43. 43. Backbone.ModelTuesday, November 8, 11
  44. 44. var Person = Backbone.Model.extend({ initialize: function(){ console.log("Im alive!"); } }); new Person();Tuesday, November 8, 11
  45. 45. var Person = Backbone.Model.extend({ initialize: function(){ console.log("Im alive!"); } }); new Person();Tuesday, November 8, 11
  46. 46. var Person = Backbone.Model.extend({ initialize: function(){ console.log("Im alive!"); } }); new Person();Tuesday, November 8, 11
  47. 47. var Person = Backbone.Model.extend({}); var me = new Person({name: Radoslav}); me.get(name); // Radoslav me.set({lastName: Stankov}); me.get(lastName); // StankovTuesday, November 8, 11
  48. 48. var Person = Backbone.Model.extend({}); var me = new Person({name: Radoslav}); me.get(name); // Radoslav me.set({lastName: Stankov}); me.get(lastName); // StankovTuesday, November 8, 11
  49. 49. var Person = Backbone.Model.extend({}); var me = new Person({name: Radoslav}); me.get(name); // Radoslav me.set({lastName: Stankov}); me.get(lastName); // StankovTuesday, November 8, 11
  50. 50. var Person = Backbone.Model.extend({}); var me = new Person({name: Radoslav}); me.get(name); // Radoslav me.set({lastName: Stankov}); me.get(lastName); // StankovTuesday, November 8, 11
  51. 51. var Person = Backbone.Model.extend({}); var me = new Person({name: Radoslav}); me.get(name); // Radoslav me.set({lastName: Stankov}); me.get(lastName); // StankovTuesday, November 8, 11
  52. 52. var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, } }); var me = new Person(); me.get(name); // John me.get(lastName); // DoeTuesday, November 8, 11
  53. 53. var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, } }); var me = new Person(); me.get(name); // John me.get(lastName); // DoeTuesday, November 8, 11
  54. 54. var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, } }); var me = new Person(); me.get(name); // John me.get(lastName); // DoeTuesday, November 8, 11
  55. 55. var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, } }); var me = new Person(); me.get(name); // John me.get(lastName); // DoeTuesday, November 8, 11
  56. 56. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get(value); }, sum: function(value){ this.set({value: value + this.get(value)}); }, reset: function(){ this.set({value: 0}); } });Tuesday, November 8, 11
  57. 57. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get(value); }, sum: function(value){ this.set({value: value + this.get(value)}); }, reset: function(){ this.set({value: 0}); } });Tuesday, November 8, 11
  58. 58. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get(value); }, sum: function(value){ this.set({value: value + this.get(value)}); }, reset: function(){ this.set({value: 0}); } });Tuesday, November 8, 11
  59. 59. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get(value); }, sum: function(value){ this.set({value: value + this.get(value)}); }, reset: function(){ this.set({value: 0}); } });Tuesday, November 8, 11
  60. 60. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get(value); }, sum: function(value){ this.set({value: value + this.get(value)}); }, reset: function(){ this.set({value: 0}); } });Tuesday, November 8, 11
  61. 61. var cal = new Calculator(); cal.bind(change:value, function(model, value){ console.log(value); }); cal.bind(change, function(model){ console.log(model.get(value)); }); cal.bind(all, function(eventName) { console.log(I see every thing!, eventName); });Tuesday, November 8, 11
  62. 62. var cal = new Calculator(); cal.bind(change:value, function(model, value){ console.log(value); }); cal.bind(change, function(model){ console.log(model.get(value)); }); cal.bind(all, function(eventName) { console.log(I see every thing!, eventName); });Tuesday, November 8, 11
  63. 63. var cal = new Calculator(); cal.bind(change:value, function(model, value){ console.log(value); }); cal.bind(change, function(model){ console.log(model.get(value)); }); cal.bind(all, function(eventName) { console.log(I see every thing!, eventName); });Tuesday, November 8, 11
  64. 64. var cal = new Calculator(); cal.bind(change:value, function(model, value){ console.log(value); }); cal.bind(change, function(model){ console.log(model.get(value)); }); cal.bind(all, function(eventName) { console.log(I see every thing!, eventName); });Tuesday, November 8, 11
  65. 65. var cal = new Calculator(); cal.bind(myEvent, function(){ console.log(KaBoom....); }); cal.trigger(myEvent);Tuesday, November 8, 11
  66. 66. var Product = Backbone.Model.extend({ urlRoot: /products }); var chair = new Product({ name: chair, price: 10 }); chair.save(); // POST /productsTuesday, November 8, 11
  67. 67. var Product = Backbone.Model.extend({ url: function(){ return /products/ + (this.isNew() ? : this.id); }});var chair = new Product({ id: 5, name: chair, price: 10});chair.save();// PUT /products/1Tuesday, November 8, 11
  68. 68. http://documentcloud.github.com/backbone/#Model-saveTuesday, November 8, 11
  69. 69. И още... • validate • escape • has • unset • clear • hasChanged • changedAttributes • previousAttributes • fetch • toJSON • cloneTuesday, November 8, 11
  70. 70. Backbone.ViewTuesday, November 8, 11
  71. 71. Tuesday, November 8, 11
  72. 72. var UserNameView = Backbone.View.extend({ tagName: input, className: string optional, id: user-name, attributes: { type: string, name: user[name] } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">Tuesday, November 8, 11
  73. 73. var UserNameView = Backbone.View.extend({ tagName: input, className: string optional, id: user-name, attributes: { type: string, name: user[name] } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">Tuesday, November 8, 11
  74. 74. var UserNameView = Backbone.View.extend({ tagName: input, className: string optional, id: user-name, attributes: { type: string, name: user[name] } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">Tuesday, November 8, 11
  75. 75. var UserNameView = Backbone.View.extend({ tagName: input, className: string optional, id: user-name, attributes: { type: string, name: user[name] } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">Tuesday, November 8, 11
  76. 76. var UserNameView = Backbone.View.extend({ tagName: input, className: string optional, id: user-name, attributes: { type: string, name: user[name] } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">Tuesday, November 8, 11
  77. 77. var UserNameView = Backbone.View.extend({ tagName: input, className: string optional, id: user-name, attributes: { type: string, name: user[name] } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">Tuesday, November 8, 11
  78. 78. var UserNameView = Backbone.View.extend({ tagName: input, className: string optional, id: user-name, attributes: { type: string, name: user[name] } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">Tuesday, November 8, 11
  79. 79. var UsersListView = Backbone.View.extend({ el: #users-list }); var userList = new UsersListView(); console.log(userList.el);Tuesday, November 8, 11
  80. 80. var EditBoxView = Backbone.View.extend({}); var element = $(#edit-box-view).get(0), editBox = new EditBoxView({el: element}); console.log(editBox.el === element);Tuesday, November 8, 11
  81. 81. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {} });Tuesday, November 8, 11
  82. 82. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {} });Tuesday, November 8, 11
  83. 83. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {} });Tuesday, November 8, 11
  84. 84. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {} });Tuesday, November 8, 11
  85. 85. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {} });Tuesday, November 8, 11
  86. 86. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {} });Tuesday, November 8, 11
  87. 87. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {} });Tuesday, November 8, 11
  88. 88. <script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p> </script>Tuesday, November 8, 11
  89. 89. var NewsView = Backbone.View.extend({ template: _.template($(#news).html()), render: function() { this.el.innerHTML = this.template(this.model); return this; } });Tuesday, November 8, 11
  90. 90. var view = new NewsView({ model: { title: "News Title", created_at: "Today", text: "Long text" } }); document.body.appendChild(view.render().el);Tuesday, November 8, 11
  91. 91. <script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p> </script>Tuesday, November 8, 11
  92. 92. <div> <h1>News Title</h1> <time>Today</time> <p>Long text</p> </div>Tuesday, November 8, 11
  93. 93. View Model DOMTuesday, November 8, 11
  94. 94. View Model DOMTuesday, November 8, 11
  95. 95. View Model DOMTuesday, November 8, 11
  96. 96. View Model DOMTuesday, November 8, 11
  97. 97. View Model DOMTuesday, November 8, 11
  98. 98. View Model DOMTuesday, November 8, 11
  99. 99. View Model DOMTuesday, November 8, 11
  100. 100. View Model DOMTuesday, November 8, 11
  101. 101. View Model DOMTuesday, November 8, 11
  102. 102. View Model DOMTuesday, November 8, 11
  103. 103. View Model DOM View 2Tuesday, November 8, 11
  104. 104. View Model DOM View 2Tuesday, November 8, 11
  105. 105. View Model DOM View 2Tuesday, November 8, 11
  106. 106. View Model DOM View 2Tuesday, November 8, 11
  107. 107. View Model DOM View 2Tuesday, November 8, 11
  108. 108. View Model DOM View 2Tuesday, November 8, 11
  109. 109. View Model DOM View 2Tuesday, November 8, 11
  110. 110. View Model DOM View 2Tuesday, November 8, 11
  111. 111. View Model DOM View 2Tuesday, November 8, 11
  112. 112. View Model DOM View 2Tuesday, November 8, 11
  113. 113. View View 2 Model DOMTuesday, November 8, 11
  114. 114. View View 2 Model DOM View 3Tuesday, November 8, 11
  115. 115. View View 2 Model DOM View 3 View 4Tuesday, November 8, 11
  116. 116. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  117. 117. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  118. 118. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  119. 119. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  120. 120. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  121. 121. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  122. 122. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  123. 123. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  124. 124. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  125. 125. DemoTuesday, November 8, 11
  126. 126. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, increment: function() { this.set({value: this.get(value) + 1}); }, decrement: function() { this.set({value: this.get(value) - 1}); }, getValue: function() { return this.get(value); } });Tuesday, November 8, 11
  127. 127. var ButtonsView = Backbone.View.extend({ events: { click .plus: plus, click .minus: minus }, plus: function() { this.model.increment(); }, minus: function() { this.model.decrement(); } });Tuesday, November 8, 11
  128. 128. var DisplayView = Backbone.View.extend({ initialize: function() { this.model.bind(change:value, this.render, this); this.render(); }, render: function() { this.el.innerHTML = this.model.getValue(); return this; }});Tuesday, November 8, 11
  129. 129. var cal = new Calculator(); new ButtonsView({model: cal, el: .buttons}); new DisplayView({model: cal, el: .display});Tuesday, November 8, 11
  130. 130. Backbone.CollectionTuesday, November 8, 11
  131. 131. var ProductsCollection = Backbone.Collection.extend({ model: Product }); var products = new ProductsCollection(); products.fetch(); products.bind(reset, function(list) { console.log(Loaded, list.length, records); });Tuesday, November 8, 11
  132. 132. products.bind(add, function(model) { console.log(new product added); }); products.bind(remove, function(model) { console.log(item product removed); });Tuesday, November 8, 11
  133. 133. И още... • Underscore Methods • add / remove / at • sort / comparator • reset • create • url • toJSONTuesday, November 8, 11
  134. 134. Backbone.RouterTuesday, November 8, 11
  135. 135. Tuesday, November 8, 11
  136. 136. var AppRouter = Backbone.Router.extend({ routes: { pages: index, pages/search/:q: search, pages/:id: show }, initialize: function() { console.log(initialize); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();Tuesday, November 8, 11
  137. 137. var AppRouter = Backbone.Router.extend({ routes: { pages: index, pages/search/:q: search, pages/:id: show }, initialize: function() { console.log(initialize); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();Tuesday, November 8, 11
  138. 138. var AppRouter = Backbone.Router.extend({ routes: { pages: index, pages/search/:q: search, pages/:id: show }, initialize: function() { console.log(initialize); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();Tuesday, November 8, 11
  139. 139. var AppRouter = Backbone.Router.extend({ routes: { pages: index, pages/search/:q: search, pages/:id: show }, initialize: function() { console.log(initialize); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();Tuesday, November 8, 11
  140. 140. var AppRouter = Backbone.Router.extend({ routes: { pages: index, pages/search/:q: search, pages/:id: show }, initialize: function() { console.log(initialize); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();Tuesday, November 8, 11
  141. 141. var AppRouter = Backbone.Router.extend({ routes: { pages: index, pages/search/:q: search, pages/:id: show }, initialize: function() { console.log(initialize); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();Tuesday, November 8, 11
  142. 142. var AppRouter = Backbone.Router.extend({ routes: { pages: index, pages/search/:q: search, pages/:id: show }, initialize: function() { console.log(initialize); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();Tuesday, November 8, 11
  143. 143. var AppRouter = Backbone.Router.extend({ routes: { pages: index, pages/search/:q: search, pages/:id: show }, initialize: function() { console.log(initialize); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();Tuesday, November 8, 11
  144. 144. var AppRouter = Backbone.Router.extend({ routes: { pages: index, pages/search/:q: search, pages/:id: show }, initialize: function() { console.log(initialize); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();Tuesday, November 8, 11
  145. 145. var AppRouter = Backbone.Router.extend({ routes: { pages: index, pages/search/:q: search, pages/:id: show }, initialize: function() { console.log(initialize); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();Tuesday, November 8, 11
  146. 146. var AppRouter = Backbone.Router.extend({ routes: { pages: index, pages/search/:q: search, pages/:id: show }, initialize: function() { console.log(initialize); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();Tuesday, November 8, 11
  147. 147. app.navigate(pages, true); app.navigate(pages/search/title, true); app.navigate(pages/3, true);Tuesday, November 8, 11
  148. 148. site.com/path#pages site.com/path#pages/search/title site.com/path#pages/3Tuesday, November 8, 11
  149. 149. Tuesday, November 8, 11
  150. 150. Backbone.history.start({pushState: true});Tuesday, November 8, 11
  151. 151. site.com/path#pages site.com/path#pages/search/title site.com/path#pages/3Tuesday, November 8, 11
  152. 152. site.com/path/pages site.com/path/pages/search/title site.com/path/pages/3Tuesday, November 8, 11
  153. 153. Tuesday, November 8, 11
  154. 154. Tuesday, November 8, 11
  155. 155. Tuesday, November 8, 11
  156. 156. Tuesday, November 8, 11
  157. 157. Tuesday, November 8, 11
  158. 158. Tuesday, November 8, 11
  159. 159. Tuesday, November 8, 11
  160. 160. НедостатъциTuesday, November 8, 11
  161. 161. АлтернативиTuesday, November 8, 11
  162. 162. АлтернативиTuesday, November 8, 11
  163. 163. АлтернативиTuesday, November 8, 11
  164. 164. АлтернативиTuesday, November 8, 11
  165. 165. Въпроси?Tuesday, November 8, 11
  166. 166. Благодаря за вниманието @rstankovTuesday, November 8, 11
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×