Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Радослав СтанковOpenFest           05/11/2011
Кой съм аз?@rstankovhttp://rstankov.comhttp://github.com/rstankov
Browser        ControllerModel                View        Сървър
Browser        ControllerModel                View        Сървър
Browser        ControllerModel                View        Сървър
Browser        ControllerModel                View        Сървър
Browser        ControllerModel                View        Сървър
Browser        ControllerModel                View        Сървър
Browser        ControllerModel                View        Сървър
Browser        ControllerModel                View        Сървър
Browser        ControllerModel                View        Сървър
Browser        ControllerModel                View        Сървър
Browser        ControllerModel                View        Сървър
Browser        ControllerModel                View        Сървър
Browser        ControllerModel                View        Сървър
BrowserDomViewModel
BrowserDomViewModel
BrowserDomViewModel
BrowserDomViewModel
BrowserDomViewModel
BrowserDomViewModel
BrowserDomViewModel
BrowserDomViewModel
BrowserDomViewModel
Backbone.Events
var object = {};$.extend(object, Backbone.Events);object.bind(eventName, function() {  console.log(1);});object.bind(event...
var object = {};$.extend(object, Backbone.Events);object.bind(eventName, function() {  console.log(1);});object.bind(event...
var object = {};$.extend(object, Backbone.Events);object.bind(eventName, function() {  console.log(1);});object.bind(event...
var object = {};$.extend(object, Backbone.Events);object.bind(eventName, function() {  console.log(1);});object.bind(event...
var object = {};$.extend(object, Backbone.Events);object.bind(eventName, function() {  console.log(1);});object.bind(event...
Backbone.Model
var Person = Backbone.Model.extend({  initialize: function(){    console.log("Im alive!");  }});new Person();
var Person = Backbone.Model.extend({  initialize: function(){    console.log("Im alive!");  }});new Person();
var Person = Backbone.Model.extend({  initialize: function(){    console.log("Im alive!");  }});new Person();
var Person = Backbone.Model.extend({});var me = new Person({name: Radoslav});me.get(name);                  // Radoslavme....
var Person = Backbone.Model.extend({});var me = new Person({name: Radoslav});me.get(name);                  // Radoslavme....
var Person = Backbone.Model.extend({});var me = new Person({name: Radoslav});me.get(name);                  // Radoslavme....
var Person = Backbone.Model.extend({});var me = new Person({name: Radoslav});me.get(name);                  // Radoslavme....
var Person = Backbone.Model.extend({});var me = new Person({name: Radoslav});me.get(name);                  // Radoslavme....
var Person = Backbone.Model.extend({  defaults: {    name: John,    lastName: Doe,  }});var me = new Person();me.get(name)...
var Person = Backbone.Model.extend({  defaults: {    name: John,    lastName: Doe,  }});var me = new Person();me.get(name)...
var Person = Backbone.Model.extend({  defaults: {    name: John,    lastName: Doe,  }});var me = new Person();me.get(name)...
var Person = Backbone.Model.extend({  defaults: {    name: John,    lastName: Doe,  }});var me = new Person();me.get(name)...
var Calculator = Backbone.Model.extend({  defaults: {    value: 0  },  value: function(){    return this.get(value);  },  ...
var Calculator = Backbone.Model.extend({  defaults: {    value: 0  },  value: function(){    return this.get(value);  },  ...
var Calculator = Backbone.Model.extend({  defaults: {    value: 0  },  value: function(){    return this.get(value);  },  ...
var Calculator = Backbone.Model.extend({  defaults: {    value: 0  },  value: function(){    return this.get(value);  },  ...
var Calculator = Backbone.Model.extend({  defaults: {    value: 0  },  value: function(){    return this.get(value);  },  ...
var cal = new Calculator();cal.bind(change:value, function(model, value){  console.log(value);});cal.bind(change, function...
var cal = new Calculator();cal.bind(change:value, function(model, value){  console.log(value);});cal.bind(change, function...
var cal = new Calculator();cal.bind(change:value, function(model, value){  console.log(value);});cal.bind(change, function...
var cal = new Calculator();cal.bind(change:value, function(model, value){  console.log(value);});cal.bind(change, function...
var cal = new Calculator();cal.bind(myEvent, function(){  console.log(KaBoom....);});cal.trigger(myEvent);
var Product = Backbone.Model.extend({  urlRoot: /products});var chair = new Product({  name: chair,  price: 10});chair.sav...
var Product = Backbone.Model.extend({  url: function(){    return /products/ + (this.isNew() ?  : this.id);  }});var chair...
http://documentcloud.github.com/backbone/#Model-save
И още...• validate• escape• has• unset• clear• hasChanged• changedAttributes• previousAttributes• fetch• toJSON• clone
Backbone.View
var UserNameView = Backbone.View.extend({   tagName: input,   className: string optional,   id:      user-name,   attribut...
var UserNameView = Backbone.View.extend({   tagName: input,   className: string optional,   id:      user-name,   attribut...
var UserNameView = Backbone.View.extend({   tagName: input,   className: string optional,   id:      user-name,   attribut...
var UserNameView = Backbone.View.extend({   tagName: input,   className: string optional,   id:      user-name,   attribut...
var UserNameView = Backbone.View.extend({   tagName: input,   className: string optional,   id:      user-name,   attribut...
var UserNameView = Backbone.View.extend({   tagName: input,   className: string optional,   id:      user-name,   attribut...
var UserNameView = Backbone.View.extend({   tagName: input,   className: string optional,   id:      user-name,   attribut...
var UsersListView = Backbone.View.extend({  el: #users-list});var userList = new UsersListView();console.log(userList.el);
var EditBoxView = Backbone.View.extend({});var element = $(#edit-box-view).get(0),  editBox = new EditBoxView({el: element...
var DocumentView = Backbone.View.extend({  events: {    dblclick:        open,    click .grid .doc: select,    customEvent...
var DocumentView = Backbone.View.extend({  events: {    dblclick:        open,    click .grid .doc: select,    customEvent...
var DocumentView = Backbone.View.extend({  events: {    dblclick:        open,    click .grid .doc: select,    customEvent...
var DocumentView = Backbone.View.extend({  events: {    dblclick:        open,    click .grid .doc: select,    customEvent...
var DocumentView = Backbone.View.extend({  events: {    dblclick:        open,    click .grid .doc: select,    customEvent...
var DocumentView = Backbone.View.extend({  events: {    dblclick:        open,    click .grid .doc: select,    customEvent...
var DocumentView = Backbone.View.extend({  events: {    dblclick:        open,    click .grid .doc: select,    customEvent...
<script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p></script>
var NewsView = Backbone.View.extend({  template: _.template($(#news).html()),  render: function() {    this.el.innerHTML =...
var view = new NewsView({  model: {    title: "News Title",    created_at: "Today",    text: "Long text"  }});document.bod...
<script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p></script>
<div> <h1>News Title</h1> <time>Today</time> <p>Long text</p></div>
ViewModel          DOM
ViewModel          DOM
ViewModel          DOM
ViewModel          DOM
ViewModel          DOM
ViewModel          DOM
ViewModel          DOM
ViewModel          DOM
ViewModel          DOM
ViewModel          DOM
ViewModel            DOM        View 2
ViewModel            DOM        View 2
ViewModel            DOM        View 2
ViewModel            DOM        View 2
ViewModel            DOM        View 2
ViewModel            DOM        View 2
ViewModel            DOM        View 2
ViewModel            DOM        View 2
ViewModel            DOM        View 2
ViewModel            DOM        View 2
View        View 2Model            DOM
View        View 2Model            DOM        View 3
View        View 2Model            DOM        View 3        View 4
View         View 2Model               DOM         View 3         View 4        View .. N
View         View 2Model               DOM         View 3         View 4        View .. N
View         View 2Model               DOM         View 3         View 4        View .. N
View         View 2Model               DOM         View 3         View 4        View .. N
View         View 2Model               DOM         View 3         View 4        View .. N
View         View 2Model               DOM         View 3         View 4        View .. N
View         View 2Model               DOM         View 3         View 4        View .. N
View         View 2Model               DOM         View 3         View 4        View .. N
View         View 2Model               DOM         View 3         View 4        View .. N
Demo
var Calculator = Backbone.Model.extend({  defaults: {    value: 0  },  increment: function() {    this.set({value: this.ge...
var ButtonsView = Backbone.View.extend({  events: {    click .plus: plus,    click .minus: minus  },  plus: function() {  ...
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.Collection
var ProductsCollection = Backbone.Collection.extend({  model: Product});var products = new ProductsCollection();products.f...
products.bind(add, function(model) {  console.log(new product added);});products.bind(remove, function(model) {  console.l...
И още...• Underscore Methods• add / remove / at• sort / comparator• reset• create• url• toJSON
Backbone.Router
var AppRouter = Backbone.Router.extend({  routes: {    pages:         index,    pages/search/:q: search,    pages/:id:    ...
var AppRouter = Backbone.Router.extend({  routes: {    pages:         index,    pages/search/:q: search,    pages/:id:    ...
var AppRouter = Backbone.Router.extend({  routes: {    pages:         index,    pages/search/:q: search,    pages/:id:    ...
var AppRouter = Backbone.Router.extend({  routes: {    pages:         index,    pages/search/:q: search,    pages/:id:    ...
var AppRouter = Backbone.Router.extend({  routes: {    pages:         index,    pages/search/:q: search,    pages/:id:    ...
var AppRouter = Backbone.Router.extend({  routes: {    pages:         index,    pages/search/:q: search,    pages/:id:    ...
var AppRouter = Backbone.Router.extend({  routes: {    pages:         index,    pages/search/:q: search,    pages/:id:    ...
var AppRouter = Backbone.Router.extend({  routes: {    pages:         index,    pages/search/:q: search,    pages/:id:    ...
var AppRouter = Backbone.Router.extend({  routes: {    pages:         index,    pages/search/:q: search,    pages/:id:    ...
var AppRouter = Backbone.Router.extend({  routes: {    pages:         index,    pages/search/:q: search,    pages/:id:    ...
var AppRouter = Backbone.Router.extend({  routes: {    pages:         index,    pages/search/:q: search,    pages/:id:    ...
app.navigate(pages, true);app.navigate(pages/search/title, true);app.navigate(pages/3, true);
site.com/path#pagessite.com/path#pages/search/titlesite.com/path#pages/3
Backbone.history.start({pushState: true});
site.com/path#pagessite.com/path#pages/search/titlesite.com/path#pages/3
site.com/path/pagessite.com/path/pages/search/titlesite.com/path/pages/3
Недостатъци
Алтернативи
Алтернативи
Алтернативи
Алтернативи
Въпроси?
Благодаря за вниманието@rstankov
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Upcoming SlideShare
Loading in …5
×

Backbone js

2,261 views

Published on

My Backbone.js presentation at OpenFest 2011

Published in: Technology, Business
  • Be the first to comment

Backbone js

  1. 1. Радослав СтанковOpenFest 05/11/2011
  2. 2. Кой съм аз?@rstankovhttp://rstankov.comhttp://github.com/rstankov
  3. 3. Browser ControllerModel View Сървър
  4. 4. Browser ControllerModel View Сървър
  5. 5. Browser ControllerModel View Сървър
  6. 6. Browser ControllerModel View Сървър
  7. 7. Browser ControllerModel View Сървър
  8. 8. Browser ControllerModel View Сървър
  9. 9. Browser ControllerModel View Сървър
  10. 10. Browser ControllerModel View Сървър
  11. 11. Browser ControllerModel View Сървър
  12. 12. Browser ControllerModel View Сървър
  13. 13. Browser ControllerModel View Сървър
  14. 14. Browser ControllerModel View Сървър
  15. 15. Browser ControllerModel View Сървър
  16. 16. BrowserDomViewModel
  17. 17. BrowserDomViewModel
  18. 18. BrowserDomViewModel
  19. 19. BrowserDomViewModel
  20. 20. BrowserDomViewModel
  21. 21. BrowserDomViewModel
  22. 22. BrowserDomViewModel
  23. 23. BrowserDomViewModel
  24. 24. BrowserDomViewModel
  25. 25. Backbone.Events
  26. 26. 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 2
  27. 27. 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 2
  28. 28. 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 2
  29. 29. 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 2
  30. 30. 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 2
  31. 31. Backbone.Model
  32. 32. var Person = Backbone.Model.extend({ initialize: function(){ console.log("Im alive!"); }});new Person();
  33. 33. var Person = Backbone.Model.extend({ initialize: function(){ console.log("Im alive!"); }});new Person();
  34. 34. var Person = Backbone.Model.extend({ initialize: function(){ console.log("Im alive!"); }});new Person();
  35. 35. var Person = Backbone.Model.extend({});var me = new Person({name: Radoslav});me.get(name); // Radoslavme.set({lastName: Stankov});me.get(lastName); // Stankov
  36. 36. var Person = Backbone.Model.extend({});var me = new Person({name: Radoslav});me.get(name); // Radoslavme.set({lastName: Stankov});me.get(lastName); // Stankov
  37. 37. var Person = Backbone.Model.extend({});var me = new Person({name: Radoslav});me.get(name); // Radoslavme.set({lastName: Stankov});me.get(lastName); // Stankov
  38. 38. var Person = Backbone.Model.extend({});var me = new Person({name: Radoslav});me.get(name); // Radoslavme.set({lastName: Stankov});me.get(lastName); // Stankov
  39. 39. var Person = Backbone.Model.extend({});var me = new Person({name: Radoslav});me.get(name); // Radoslavme.set({lastName: Stankov});me.get(lastName); // Stankov
  40. 40. var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, }});var me = new Person();me.get(name); // Johnme.get(lastName); // Doe
  41. 41. var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, }});var me = new Person();me.get(name); // Johnme.get(lastName); // Doe
  42. 42. var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, }});var me = new Person();me.get(name); // Johnme.get(lastName); // Doe
  43. 43. var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, }});var me = new Person();me.get(name); // Johnme.get(lastName); // Doe
  44. 44. 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}); }});
  45. 45. 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}); }});
  46. 46. 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}); }});
  47. 47. 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}); }});
  48. 48. 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}); }});
  49. 49. 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);});
  50. 50. 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);});
  51. 51. 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);});
  52. 52. 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);});
  53. 53. var cal = new Calculator();cal.bind(myEvent, function(){ console.log(KaBoom....);});cal.trigger(myEvent);
  54. 54. var Product = Backbone.Model.extend({ urlRoot: /products});var chair = new Product({ name: chair, price: 10});chair.save();// POST /products
  55. 55. 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/1
  56. 56. http://documentcloud.github.com/backbone/#Model-save
  57. 57. И още...• validate• escape• has• unset• clear• hasChanged• changedAttributes• previousAttributes• fetch• toJSON• clone
  58. 58. Backbone.View
  59. 59. 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">
  60. 60. 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">
  61. 61. 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">
  62. 62. 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">
  63. 63. 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">
  64. 64. 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">
  65. 65. 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">
  66. 66. var UsersListView = Backbone.View.extend({ el: #users-list});var userList = new UsersListView();console.log(userList.el);
  67. 67. var EditBoxView = Backbone.View.extend({});var element = $(#edit-box-view).get(0), editBox = new EditBoxView({el: element});console.log(editBox.el === element);
  68. 68. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {}});
  69. 69. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {}});
  70. 70. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {}});
  71. 71. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {}});
  72. 72. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {}});
  73. 73. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {}});
  74. 74. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {}});
  75. 75. <script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p></script>
  76. 76. var NewsView = Backbone.View.extend({ template: _.template($(#news).html()), render: function() { this.el.innerHTML = this.template(this.model); return this; }});
  77. 77. var view = new NewsView({ model: { title: "News Title", created_at: "Today", text: "Long text" }});document.body.appendChild(view.render().el);
  78. 78. <script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p></script>
  79. 79. <div> <h1>News Title</h1> <time>Today</time> <p>Long text</p></div>
  80. 80. ViewModel DOM
  81. 81. ViewModel DOM
  82. 82. ViewModel DOM
  83. 83. ViewModel DOM
  84. 84. ViewModel DOM
  85. 85. ViewModel DOM
  86. 86. ViewModel DOM
  87. 87. ViewModel DOM
  88. 88. ViewModel DOM
  89. 89. ViewModel DOM
  90. 90. ViewModel DOM View 2
  91. 91. ViewModel DOM View 2
  92. 92. ViewModel DOM View 2
  93. 93. ViewModel DOM View 2
  94. 94. ViewModel DOM View 2
  95. 95. ViewModel DOM View 2
  96. 96. ViewModel DOM View 2
  97. 97. ViewModel DOM View 2
  98. 98. ViewModel DOM View 2
  99. 99. ViewModel DOM View 2
  100. 100. View View 2Model DOM
  101. 101. View View 2Model DOM View 3
  102. 102. View View 2Model DOM View 3 View 4
  103. 103. View View 2Model DOM View 3 View 4 View .. N
  104. 104. View View 2Model DOM View 3 View 4 View .. N
  105. 105. View View 2Model DOM View 3 View 4 View .. N
  106. 106. View View 2Model DOM View 3 View 4 View .. N
  107. 107. View View 2Model DOM View 3 View 4 View .. N
  108. 108. View View 2Model DOM View 3 View 4 View .. N
  109. 109. View View 2Model DOM View 3 View 4 View .. N
  110. 110. View View 2Model DOM View 3 View 4 View .. N
  111. 111. View View 2Model DOM View 3 View 4 View .. N
  112. 112. Demo
  113. 113. 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); }});
  114. 114. var ButtonsView = Backbone.View.extend({ events: { click .plus: plus, click .minus: minus }, plus: function() { this.model.increment(); }, minus: function() { this.model.decrement(); }});
  115. 115. 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; }});
  116. 116. var cal = new Calculator();new ButtonsView({model: cal, el: .buttons});new DisplayView({model: cal, el: .display});
  117. 117. Backbone.Collection
  118. 118. var ProductsCollection = Backbone.Collection.extend({ model: Product});var products = new ProductsCollection();products.fetch();products.bind(reset, function(list) { console.log(Loaded, list.length, records);});
  119. 119. products.bind(add, function(model) { console.log(new product added);});products.bind(remove, function(model) { console.log(item product removed);});
  120. 120. И още...• Underscore Methods• add / remove / at• sort / comparator• reset• create• url• toJSON
  121. 121. Backbone.Router
  122. 122. 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();
  123. 123. 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();
  124. 124. 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();
  125. 125. 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();
  126. 126. 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();
  127. 127. 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();
  128. 128. 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();
  129. 129. 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();
  130. 130. 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();
  131. 131. 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();
  132. 132. 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();
  133. 133. app.navigate(pages, true);app.navigate(pages/search/title, true);app.navigate(pages/3, true);
  134. 134. site.com/path#pagessite.com/path#pages/search/titlesite.com/path#pages/3
  135. 135. Backbone.history.start({pushState: true});
  136. 136. site.com/path#pagessite.com/path#pages/search/titlesite.com/path#pages/3
  137. 137. site.com/path/pagessite.com/path/pages/search/titlesite.com/path/pages/3
  138. 138. Недостатъци
  139. 139. Алтернативи
  140. 140. Алтернативи
  141. 141. Алтернативи
  142. 142. Алтернативи
  143. 143. Въпроси?
  144. 144. Благодаря за вниманието@rstankov

×