Backbone.js

10,678 views

Published on

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

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

No Downloads
Views
Total views
10,678
On SlideShare
0
From Embeds
0
Number of Embeds
7,954
Actions
Shares
0
Downloads
66
Comments
0
Likes
5
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

×