backbone.js-init-lab

 backbone.js-init-lab

My backbone.js presentation at initLab. Code for the demos available at: https://github.com/RStankov/backbone-presentation

7a0e72a6f55811246bb5d9a946fd2e49?s=128

Radoslav Stankov

June 23, 2012
Tweet

Transcript

  1. 3.
  2. 4.
  3. 5.
  4. 6.
  5. 7.
  6. 8.
  7. 9.
  8. 10.
  9. 11.
  10. 12.
  11. 13.
  12. 14.
  13. 15.
  14. 16.
  15. 17.
  16. 18.
  17. 19.
  18. 20.
  19. 43.

    MV*

  20. 45.

    var object = {}; $.extend(object, Backbone.Events); object.on('eventName', function() { console.log('1');

    }); object.on('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2'
  21. 46.

    var object = {}; $.extend(object, Backbone.Events); object.on('eventName', function() { console.log('1');

    }); object.on('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2'
  22. 47.

    var object = {}; $.extend(object, Backbone.Events); object.on('eventName', function() { console.log('1');

    }); object.on('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2'
  23. 48.

    var object = {}; $.extend(object, Backbone.Events); object.on('eventName', function() { console.log('1');

    }); object.on('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2'
  24. 49.

    var object = {}; $.extend(object, Backbone.Events); object.on('eventName', function() { console.log('1');

    }); object.on('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2'
  25. 54.

    var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'});

    me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.set(lastName, 'Stankov'); me.get('lastName'); // Stankov
  26. 55.

    var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'});

    me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.set(lastName, 'Stankov'); me.get('lastName'); // Stankov
  27. 56.

    var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'});

    me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.set(lastName, 'Stankov'); me.get('lastName'); // Stankov
  28. 57.

    var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'});

    me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.set(lastName, 'Stankov'); me.get('lastName'); // Stankov
  29. 58.

    var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'});

    me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.set(lastName, 'Stankov'); me.get('lastName'); // Stankov
  30. 59.

    var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe',

    } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
  31. 60.

    var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe',

    } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
  32. 61.

    var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe',

    } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
  33. 62.

    var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe',

    } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
  34. 63.

    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); } });
  35. 64.

    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); } });
  36. 65.

    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); } });
  37. 66.

    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); } });
  38. 67.

    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); } });
  39. 68.

    var cal = new Calculator(); cal.on('change:value', function(model, value){ console.log(value); });

    cal.on('change', function(model){ console.log(model.get('value')); }); cal.on('all', function(eventName) { console.log('I see everything!', eventName); });
  40. 69.

    var cal = new Calculator(); cal.on('change:value', function(model, value){ console.log(value); });

    cal.on('change', function(model){ console.log(model.get('value')); }); cal.on('all', function(eventName) { console.log('I see everything!', eventName); });
  41. 70.

    var cal = new Calculator(); cal.on('change:value', function(model, value){ console.log(value); });

    cal.on('change', function(model){ console.log(model.get('value')); }); cal.on('all', function(eventName) { console.log('I see everything!', eventName); });
  42. 71.

    var cal = new Calculator(); cal.on('change:value', function(model, value){ console.log(value); });

    cal.on('change', function(model){ console.log(model.get('value')); }); cal.on('all', function(eventName) { console.log('I see everything!', eventName); });
  43. 73.

    var Product = Backbone.Model.extend({ urlRoot: '/products' }); var chair =

    new Product({ name: 'chair', price: 10 }); chair.save(); // POST /products
  44. 74.

    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
  45. 76.

    И още... • validate • escape • has • unset

    • clear • hasChanged • changedAttributes • previousAttributes • fetch • toJSON • clone
  46. 78.
  47. 79.

    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">
  48. 80.

    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">
  49. 81.

    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">
  50. 82.

    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">
  51. 83.

    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">
  52. 84.

    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">
  53. 85.

    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">
  54. 86.
  55. 87.

    var EditBoxView = Backbone.View.extend({}); var element = $('#edit-box-view').get(0), editBox =

    new EditBoxView({el: element}); console.log(editBox.el === element);
  56. 88.

    var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid

    .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  57. 89.

    var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid

    .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  58. 90.

    var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid

    .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  59. 91.

    var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid

    .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  60. 92.

    var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid

    .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  61. 93.

    var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid

    .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  62. 94.

    var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid

    .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  63. 99.

    var view = new NewsView({ model: { title: "News Title",

    created_at: "Today", text: "Long text" } }); $(’body’).html(view.render().el);
  64. 134.
  65. 135.

    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'); } });
  66. 136.

    var ButtonsView = Backbone.View.extend({ events: { 'click .plus': 'plus', 'click

    .minus': 'minus' }, plus: function() { this.model.increment(); }, minus: function() { this.model.decrement(); } });
  67. 137.

    var DisplayView = Backbone.View.extend({ initialize: function() { this.model.on('change:value', this.render, this);

    this.render(); }, render: function() { this.$el.html(this.model.getValue()); return this; } });
  68. 138.
  69. 140.

    var ProductsCollection = Backbone.Collection.extend({ model: Product }); var products =

    new ProductsCollection(); products.fetch(); products.on('reset', function(list) { console.log('Loaded', list.length, 'records'); });
  70. 142.

    И още... • Underscore Methods • add / remove /

    at • sort / comparator • reset • create • url • toJSON
  71. 144.
  72. 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();
  73. 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();
  74. 147.

    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();
  75. 148.

    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();
  76. 149.

    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();
  77. 150.

    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();
  78. 151.

    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();
  79. 152.

    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();
  80. 153.

    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();
  81. 154.

    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();
  82. 155.

    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();
  83. 160.
  84. 164.
  85. 165.
  86. 166.
  87. 167.
  88. 168.
  89. 169.
  90. 170.
  91. 171.
  92. 172.
  93. 173.
  94. 175.
  95. 180.
  96. 181.
  97. 192.
  98. 194.