Backbone.js

  • 9,270 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,270
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
61
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Радослав Станков OpenFest 05/11/2011Tuesday, November 8, 11
  • 2. Кой съм аз? @rstankov http://rstankov.com http://github.com/rstankovTuesday, November 8, 11
  • 3. Tuesday, November 8, 11
  • 4. Tuesday, November 8, 11
  • 5. Tuesday, November 8, 11
  • 6. Tuesday, November 8, 11
  • 7. Tuesday, November 8, 11
  • 8. Tuesday, November 8, 11
  • 9. Tuesday, November 8, 11
  • 10. Tuesday, November 8, 11
  • 11. Tuesday, November 8, 11
  • 12. Tuesday, November 8, 11
  • 13. Tuesday, November 8, 11
  • 14. Tuesday, November 8, 11
  • 15. Browser Controller Model View СървърTuesday, November 8, 11
  • 16. Browser Controller Model View СървърTuesday, November 8, 11
  • 17. Browser Controller Model View СървърTuesday, November 8, 11
  • 18. Browser Controller Model View СървърTuesday, November 8, 11
  • 19. Browser Controller Model View СървърTuesday, November 8, 11
  • 20. Browser Controller Model View СървърTuesday, November 8, 11
  • 21. Browser Controller Model View СървърTuesday, November 8, 11
  • 22. Browser Controller Model View СървърTuesday, November 8, 11
  • 23. Browser Controller Model View СървърTuesday, November 8, 11
  • 24. Browser Controller Model View СървърTuesday, November 8, 11
  • 25. Browser Controller Model View СървърTuesday, November 8, 11
  • 26. Browser Controller Model View СървърTuesday, November 8, 11
  • 27. Browser Controller Model View СървърTuesday, November 8, 11
  • 28. Browser Dom View ModelTuesday, November 8, 11
  • 29. Browser Dom View ModelTuesday, November 8, 11
  • 30. Browser Dom View ModelTuesday, November 8, 11
  • 31. Browser Dom View ModelTuesday, November 8, 11
  • 32. Browser Dom View ModelTuesday, November 8, 11
  • 33. Browser Dom View ModelTuesday, November 8, 11
  • 34. Browser Dom View ModelTuesday, November 8, 11
  • 35. Browser Dom View ModelTuesday, November 8, 11
  • 36. Browser Dom View ModelTuesday, November 8, 11
  • 37. Backbone.EventsTuesday, November 8, 11
  • 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. 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. 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. 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. 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. Backbone.ModelTuesday, November 8, 11
  • 44. var Person = Backbone.Model.extend({ initialize: function(){ console.log("Im alive!"); } }); new Person();Tuesday, November 8, 11
  • 45. var Person = Backbone.Model.extend({ initialize: function(){ console.log("Im alive!"); } }); new Person();Tuesday, November 8, 11
  • 46. var Person = Backbone.Model.extend({ initialize: function(){ console.log("Im alive!"); } }); new Person();Tuesday, November 8, 11
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. var cal = new Calculator(); cal.bind(myEvent, function(){ console.log(KaBoom....); }); cal.trigger(myEvent);Tuesday, November 8, 11
  • 66. var Product = Backbone.Model.extend({ urlRoot: /products }); var chair = new Product({ name: chair, price: 10 }); chair.save(); // POST /productsTuesday, November 8, 11
  • 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. http://documentcloud.github.com/backbone/#Model-saveTuesday, November 8, 11
  • 69. И още... • validate • escape • has • unset • clear • hasChanged • changedAttributes • previousAttributes • fetch • toJSON • cloneTuesday, November 8, 11
  • 70. Backbone.ViewTuesday, November 8, 11
  • 71. Tuesday, November 8, 11
  • 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. 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. 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. 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. 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. 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. 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. var UsersListView = Backbone.View.extend({ el: #users-list }); var userList = new UsersListView(); console.log(userList.el);Tuesday, November 8, 11
  • 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. 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. 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. 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. 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. 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. 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. 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. <script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p> </script>Tuesday, November 8, 11
  • 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. 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. <script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p> </script>Tuesday, November 8, 11
  • 92. <div> <h1>News Title</h1> <time>Today</time> <p>Long text</p> </div>Tuesday, November 8, 11
  • 93. View Model DOMTuesday, November 8, 11
  • 94. View Model DOMTuesday, November 8, 11
  • 95. View Model DOMTuesday, November 8, 11
  • 96. View Model DOMTuesday, November 8, 11
  • 97. View Model DOMTuesday, November 8, 11
  • 98. View Model DOMTuesday, November 8, 11
  • 99. View Model DOMTuesday, November 8, 11
  • 100. View Model DOMTuesday, November 8, 11
  • 101. View Model DOMTuesday, November 8, 11
  • 102. View Model DOMTuesday, November 8, 11
  • 103. View Model DOM View 2Tuesday, November 8, 11
  • 104. View Model DOM View 2Tuesday, November 8, 11
  • 105. View Model DOM View 2Tuesday, November 8, 11
  • 106. View Model DOM View 2Tuesday, November 8, 11
  • 107. View Model DOM View 2Tuesday, November 8, 11
  • 108. View Model DOM View 2Tuesday, November 8, 11
  • 109. View Model DOM View 2Tuesday, November 8, 11
  • 110. View Model DOM View 2Tuesday, November 8, 11
  • 111. View Model DOM View 2Tuesday, November 8, 11
  • 112. View Model DOM View 2Tuesday, November 8, 11
  • 113. View View 2 Model DOMTuesday, November 8, 11
  • 114. View View 2 Model DOM View 3Tuesday, November 8, 11
  • 115. View View 2 Model DOM View 3 View 4Tuesday, November 8, 11
  • 116. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • 117. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • 118. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • 119. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • 120. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • 121. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • 122. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • 123. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • 124. View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • 125. DemoTuesday, November 8, 11
  • 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. 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. 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. var cal = new Calculator(); new ButtonsView({model: cal, el: .buttons}); new DisplayView({model: cal, el: .display});Tuesday, November 8, 11
  • 130. Backbone.CollectionTuesday, November 8, 11
  • 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. 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. И още... • Underscore Methods • add / remove / at • sort / comparator • reset • create • url • toJSONTuesday, November 8, 11
  • 134. Backbone.RouterTuesday, November 8, 11
  • 135. Tuesday, November 8, 11
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. app.navigate(pages, true); app.navigate(pages/search/title, true); app.navigate(pages/3, true);Tuesday, November 8, 11
  • 148. site.com/path#pages site.com/path#pages/search/title site.com/path#pages/3Tuesday, November 8, 11
  • 149. Tuesday, November 8, 11
  • 150. Backbone.history.start({pushState: true});Tuesday, November 8, 11
  • 151. site.com/path#pages site.com/path#pages/search/title site.com/path#pages/3Tuesday, November 8, 11
  • 152. site.com/path/pages site.com/path/pages/search/title site.com/path/pages/3Tuesday, November 8, 11
  • 153. Tuesday, November 8, 11
  • 154. Tuesday, November 8, 11
  • 155. Tuesday, November 8, 11
  • 156. Tuesday, November 8, 11
  • 157. Tuesday, November 8, 11
  • 158. Tuesday, November 8, 11
  • 159. Tuesday, November 8, 11
  • 160. НедостатъциTuesday, November 8, 11
  • 161. АлтернативиTuesday, November 8, 11
  • 162. АлтернативиTuesday, November 8, 11
  • 163. АлтернативиTuesday, November 8, 11
  • 164. АлтернативиTuesday, November 8, 11
  • 165. Въпроси?Tuesday, November 8, 11
  • 166. Благодаря за вниманието @rstankovTuesday, November 8, 11