Радослав Станков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

1,885

Published on

My Backbone.js presentation at OpenFest 2011

Published in: Technology, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,885
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
70
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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
    1. A particular slide catching your eye?

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

    ×