Your SlideShare is downloading. ×
Backbone.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Backbone.js

9,598

Published on

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

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

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

No Downloads
Views
Total Views
9,598
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
62
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

×