JSDay Italy - Backbone.js

  • 2,809 views
Uploaded on

 

  • 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
2,809
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
57
Comments
0
Likes
6

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. var Animal, myAnimal;Animal = function (name) { this.name = name || Unknown;}Animal.prototype = { say: function () { console.log( Hi, my name is + this.name + ! ); }}myAnimal = new Animal(Bello);myAnimal.say(); // Hi, my name is Bello!
  • 2. var Animal, myAnimal;Animal = function (name) { this.name = name || Unknown;}Animal.prototype = { say: function () { console.log( Hi, my name is + this.name + ! ); }}myAnimal = new Animal(Bello);myAnimal.say(); // Hi, my name is Bello!
  • 3. var Animal, myAnimal;Animal = function (name) { this.name = name || Unknown;}Animal.prototype = { say: function () { console.log( Hi, my name is + this.name + ! ); }}myAnimal = new Animal(Bello);myAnimal.say(); // Hi, my name is Bello!
  • 4. var Animal, myAnimal;Animal = function (name) { this.name = name || Unknown;}Animal.prototype = { say: function () { console.log( Hi, my name is + this.name + ! ); }}myAnimal = new Animal(Bello);myAnimal.say(); // Hi, my name is Bello!
  • 5. var Animal, myAnimal;Animal = function (name) { this.name = name || Unknown;}Animal.prototype = { say: function () { console.log( Hi, my name is + this.name + ! ); }}myAnimal = new Animal(Bello);myAnimal.say(); // Hi, my name is Bello!
  • 6. var Animal, myAnimal;Animal = function (name) { this.name = name || Unknown;}Animal.prototype = { say: function () { console.log( Hi, my name is + this.name + ! ); }}myAnimal = new Animal(Bello);myAnimal.say(); // Hi, my name is Bello!
  • 7. var Animal, myAnimal;Animal = function (name) { this.name = name || Unknown;}Animal.prototype = { say: function () { console.log( Hi, my name is + this.name + ! ); }}myAnimal = new Animal(Bello);myAnimal.say(); // Hi, my name is Bello!
  • 8. var Animal, myAnimal;Animal = function (name) { this.name = name || Unknown;}Animal.prototype = { say: function () { console.log( Hi, my name is + this.name + ! ); }}myAnimal = new Animal(Bello);myAnimal.say(); // Hi, my name is Bello!
  • 9. var Animal, myAnimal;Animal = function (name) { this.name = name || Unknown;}Animal.prototype = { say: function () { console.log( Hi, my name is + this.name + ! ); }}myAnimal = new Animal(Bello);myAnimal.say(); // Hi, my name is Bello!
  • 10. var Animal = Backbone.Model.extend({ say: function () {}});var Dog = Animal.extend({ bark: function () {}});
  • 11. var Animal = Backbone.Model.extend({ say: function () {}});var Dog = Animal.extend({ bark: function () {}});
  • 12. var Animal = Backbone.Model.extend({ say: function () {}});var Dog = Animal.extend({ bark: function () {}});
  • 13. var Animal = Backbone.Model.extend({ say: function () {}});var Dog = Animal.extend({ bark: function () {}});
  • 14. var Animal = Backbone.Model.extend({ say: function () {}});var Dog = Animal.extend({ bark: function () {}});
  • 15. var Animal = Backbone.Model.extend({ say: function () {}});var Dog = Animal.extend({ bark: function () {}});
  • 16. var Dog = Animal.extend({ bark: function () {}});var myDog = new Dog({ name: Bello});
  • 17. var Dog = Animal.extend({ bark: function () {}});var myDog = new Dog({ name: Bello});
  • 18. // The self-propagating extend function that Backbone classes use.var extend = function (protoProps, classProps) { var child = inherits(this, protoProps, classProps); child.extend = this.extend; return child;};// Set up inheritance for the model, collection, and view.Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend;
  • 19. // The self-propagating extend function that Backbone classes use.var extend = function (protoProps, classProps) { var child = inherits(this, protoProps, classProps); child.extend = this.extend; return child;};// Set up inheritance for the model, collection, and view.Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend;
  • 20. // The self-propagating extend function that Backbone classes use.var extend = function (protoProps, classProps) { var child = inherits(this, protoProps, classProps); child.extend = this.extend; return child;};// Set up inheritance for the model, collection, and view.Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend;
  • 21. // The self-propagating extend function that Backbone classes use.var extend = function (protoProps, classProps) { var child = inherits(this, protoProps, classProps); child.extend = this.extend; return child;};// Set up inheritance for the model, collection, and view.Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend;
  • 22. // The self-propagating extend function that Backbone classes use.var extend = function (protoProps, classProps) { var child = inherits(this, protoProps, classProps); child.extend = this.extend; return child;};// Set up inheritance for the model, collection, and view.Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend;
  • 23. var AppRouter = Backbone.Router.extend({ routes: { : index, q?:query: query, show/:id: show }, index: function () {}, query: function (queryString) {}, show: function (id) {}});
  • 24. var AppRouter = Backbone.Router.extend({ routes: { : index, q?:query: query, show/:id: show }, index: function () {}, query: function (queryString) {}, show: function (id) {}});
  • 25. var AppRouter = Backbone.Router.extend({ routes: { : index, q?:query: query, show/:id: show }, index: function () {}, query: function (queryString) {}, show: function (id) {}});
  • 26. var AppRouter = Backbone.Router.extend({ routes: { : index, q?:query: query, show/:id: show }, index: function () {}, query: function (queryString) {}, show: function (id) {}});
  • 27. var AppRouter = Backbone.Router.extend({ routes: { : index, q?:query: query, show/:id: show }, index: function () {}, query: function (queryString) {}, show: function (id) {}});
  • 28. var AppRouter = Backbone.Router.extend({ routes: { : index, q?:query: query, show/:id: show }, index: function () {}, query: function (queryString) {}, show: function (id) {}});
  • 29. var AppRouter = Backbone.Router.extend({ routes: { : index, q?:query: query, show/:id: show }, index: function () {}, query: function (queryString) {}, show: function (id) {}});
  • 30. var AppRouter = Backbone.Router.extend({ routes: { : index, q?:query: query, show/:id: show }, index: function () {}, query: function (queryString) {}, show: function (id) {}});
  • 31. var AppRouter = Backbone.Router.extend({ routes: { : index, q?:query: query, show/:id: show }, index: function () {}, query: function (queryString) {}, show: function (id) {}});
  • 32. var AppRouter = Backbone.Router.extend({ routes: { : index, q?:query: query, show/:id: show }, index: function () {}, query: function (queryString) {}, show: function (id) {}});
  • 33. Backbone.Router.extend({ routes: { /* matches search/pierre/zurich */ search/:who/:where: serach, /* matches download/avatar/@shvi/large */ download/*path: download } search: function (who, where) {}, download: function (path) {}});
  • 34. Backbone.Router.extend({ routes: { /* matches search/pierre/zurich */ search/:who/:where: serach, /* matches download/avatar/@shvi/large */ download/*path: download } search: function (who, where) {}, download: function (path) {}});
  • 35. var AppRouter = Backbone.Router.extend({ // …});new AppRouter();Backbone.history.start();
  • 36. var AppRouter = Backbone.Router.extend({ // …});new AppRouter();Backbone.history.start();
  • 37. var AppRouter = Backbone.Router.extend({ // …});new AppRouter();Backbone.history.start();
  • 38. var Comment = Backbone.Model.extend({});var newComment = new Comment({ name: Pierre Spring, email: pierre@nelm.io, text: Hello World});
  • 39. var Comment = Backbone.Model.extend({});var newComment = new Comment({ name: Pierre Spring, email: pierre@nelm.io, text: Hello World});
  • 40. var Comment = Backbone.Model.extend({});var newComment = new Comment({ name: Pierre Spring, email: pierre@nelm.io, text: Hello World});
  • 41. var Comment = Backbone.Model.extend({});var newComment = new Comment({ name: Pierre Spring, email: pierre@nelm.io, text: Hello World});
  • 42. var Comment = Backbone.Model.extend({});var newComment = new Comment({ name: Pierre Spring, email: pierre@nelm.io, text: Hello World});
  • 43. var Comment = Backbone.Model.extend({});var newComment = new Comment({ name: Pierre Spring, email: pierre@nelm.io, text: Hello World});
  • 44. var newComment = new Comment({ text: Hello World});newComment.set({ name: Pierre Spring, email: pierre@nelm.io});newComment.get(name); // Pierre Spring
  • 45. var newComment = new Comment({ text: Hello World});newComment.set({ name: Pierre Spring, email: pierre@nelm.io});newComment.get(name); // Pierre Spring
  • 46. var newComment = new Comment({ text: Hello World});newComment.set({ name: Pierre Spring, email: pierre@nelm.io});newComment.get(name); // Pierre Spring
  • 47. var newComment = new Comment({ text: Hello World});newComment.set({ name: Pierre Spring, email: pierre@nelm.io});newComment.get(name); // Pierre Spring
  • 48. var Comment = Backbone.Model.extend({});var newComment = new Comment({ /* … */ });newComment.save();
  • 49. var Comment = Backbone.Model.extend({ url: /api/comment/});var newComment = new Comment({ /* … */ });newComment.save();
  • 50. var Comment = Backbone.Model.extend({ localStorage: new Store("comment")});var newComment = new Comment({ /* … */ });newComment.save();
  • 51. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { }});var newComment = new Comment({ /* … */ });newComment.save();
  • 52. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { if (!options.date) { this.set({ date: moment().toString() }); } }});var newComment = new Comment({ /* … */ });newComment.save();
  • 53. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { if (!options.date) { this.set({ date: moment().toString() }); } }});var newComment = new Comment({ /* … */ });newComment.save();
  • 54. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { if (!options.date) { this.set({ date: moment().toString() }); } }});var newComment = new Comment({ /* … */ });newComment.save();
  • 55. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { if (!options.date) { this.set({ date: moment().toString() }); } }, getDisplayDate: function () { var d = this.get(date); return moment(d).fromNow(); }});
  • 56. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { if (!options.date) { this.set({ date: moment().toString() }); } }, getDisplayDate: function () { var d = this.get(date); return moment(d).fromNow(); }});
  • 57. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { if (!options.date) { this.set({ date: moment().toString() }); } }, getDisplayDate: function () { var d = this.get(date); return moment(d).fromNow(); }});
  • 58. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { if (!options.date) { this.set({ date: moment().toString() }); } }, getDisplayDate: function () { var d = this.get(date); return moment(d).fromNow(); }});
  • 59. var newComment = new Comment({ /* … */ });newComment.getDisplayDate();// a few seconds ago
  • 60. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment")});
  • 61. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment")});
  • 62. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment")});
  • 63. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment")});
  • 64. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment")});
  • 65. var CommentCollection = Backbone.Collection.extend({ /* … */});var commentCollection = new CommentCollection();commentCollection.fetch();commentCollection.each(function (commentModel) { // do s.th.});
  • 66. var CommentCollection = Backbone.Collection.extend({ /* … */});var commentCollection = new CommentCollection();commentCollection.fetch();commentCollection.each(function (commentModel) { // do s.th.});
  • 67. var CommentCollection = Backbone.Collection.extend({ /* … */});var commentCollection = new CommentCollection();commentCollection.fetch();commentCollection.each(function (commentModel) { // do s.th.});
  • 68. var CommentCollection = Backbone.Collection.extend({ /* … */});var commentCollection = new CommentCollection();commentCollection.fetch();commentCollection.each(function (commentModel) { // do s.th.});
  • 69. var CommentCollection = Backbone.Collection.extend({ /* … */});var commentCollection = new CommentCollection();commentCollection.fetch();commentCollection.each(function (commentModel) { // do s.th.});
  • 70. var newComment = new Comment({ /* … */ });newComment.save();commentCollection.add(newComment);
  • 71. var newComment = new Comment({ /* … */ });newComment.save();commentCollection.add(newComment);
  • 72. var newComment = new Comment({ /* … */ });newComment.save();commentCollection.add(newComment);
  • 73. var newComment = new Comment({ /* … */ });newComment.save();commentCollection.add(newComment);
  • 74. var newComment = new Comment({ /* … */ });newComment.save();commentCollection.add(newComment);var newComment = commentCollection.create({ /* model attributes */});
  • 75. newComment.bind( change, function (model) {});newComment.bind( change:name, function (model, attribute) {});commentCollection.bind( reset, function (commentCollection) {});commentCollection.bind( add, function (commentModel) {});
  • 76. newComment.bind( change, function (model) {});newComment.bind( change:name, function (model, attribute) {});commentCollection.bind( reset, function (commentCollection) {});commentCollection.bind( add, function (commentModel) {});
  • 77. newComment.bind( change, function (model) {});newComment.bind( change:name, function (model, attribute) {});commentCollection.bind( reset, function (commentCollection) {});commentCollection.bind( add, function (commentModel) {});
  • 78. newComment.bind( change, function (model) {});newComment.bind( change:name, function (model, attribute) {});commentCollection.bind( reset, function (commentCollection) {});commentCollection.bind( add, function (commentModel) {});
  • 79. newComment.bind( change, function (model) {});newComment.bind( change:name, function (model, attribute) {});commentCollection.bind( reset, function (commentCollection) {});commentCollection.bind( add, function (commentModel) {});
  • 80. newComment.bind( change, function (model) {});newComment.bind( change:name, function (model, attribute) {});commentCollection.bind( reset, function (commentCollection) {});commentCollection.bind( add, function (commentModel) {});
  • 81. newComment.bind( change, function (model) {});newComment.bind( change:name, function (model, attribute) {});commentCollection.bind( reset, function (commentCollection) {});commentCollection.bind( add, function (commentModel) {});
  • 82. newComment.bind( change, function (model) {});newComment.bind( change:name, function (model, attribute) {});commentCollection.bind( reset, function (commentCollection) {});commentCollection.bind( add, function (commentModel) {});
  • 83. newComment.bind( change, function (model) {});newComment.bind( change:name, function (model, attribute) {});commentCollection.bind( reset, function (commentCollection) {});commentCollection.bind( add, function (commentModel) {});
  • 84. newComment.bind( change, function (model) {});newComment.bind( change:name, function (model, attribute) {});commentCollection.bind( reset, function (commentCollection) {});commentCollection.bind( add, function (commentModel) {});
  • 85. newComment.bind( change, function (model) {});newComment.bind( change:name, function (model, attribute) {});commentCollection.bind( reset, function (commentCollection) {});commentCollection.bind( add, function (commentModel) {});
  • 86. var CommentView = Backbone.View.extend({});var commentView = new CommentView();console.log(commentView.el);// <div></div>
  • 87. var CommentView = Backbone.View.extend({});var commentView = new CommentView();console.log(commentView.el);// <div></div>
  • 88. var CommentView = Backbone.View.extend({});var commentView = new CommentView();console.log(commentView.el);// <div></div>
  • 89. var CommentView = Backbone.View.extend({});var commentView = new CommentView();console.log(commentView.el);// <div></div>
  • 90. var CommentView = Backbone.View.extend({});var commentView = new CommentView();console.log(commentView.el);// <div></div>
  • 91. var CommentView = Backbone.View.extend({ tagName: p, className: comment-list, id: container,});var commentView = new CommentView();console.log(commentView.el);// <p id=​"container" class=​"comment-list"/>
  • 92. var CommentView = Backbone.View.extend({ tagName: p, className: comment-list, id: container,});var commentView = new CommentView();console.log(commentView.el);// <p id=​"container" class=​"comment-list"/>
  • 93. var CommentView = Backbone.View.extend({ tagName: p, className: comment-list, id: container,});var commentView = new CommentView();console.log(commentView.el);// <p id=​"container" class=​"comment-list"/>
  • 94. var CommentView = Backbone.View.extend({ tagName: p, className: comment-list, id: container,});var commentView = new CommentView();console.log(commentView.el);// <p id=​"container" class=​"comment-list"/>
  • 95. var CommentView = Backbone.View.extend({ el: $(#comment-list)});var commentView = new CommentView();console.log(commentView.el);
  • 96. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 97. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 98. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 99. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 100. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 101. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 102. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 103. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 104. var commentCollection = new commentCollection();var commentView = new CommentView({ commentCollection: commentCollection});
  • 105. var commentCollection = new commentCollection();var commentView = new CommentView({ commentCollection: commentCollection});
  • 106. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 107. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 108. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 109. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 110. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 111. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 112. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 113. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 114. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 115. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 116. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 117. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 118. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 119. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($(#listRowTemplate).html()); options.commentCollection.bind(reset, this.renderRows, this); options.commentCollection.bind(add, this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); }});
  • 120. var commentCollection = new commentCollection();var commentView = new CommentView({ commentCollection: commentCollection});$(.list-view).html(commentView.el);commentCollection.fetch();
  • 121. var commentCollection = new commentCollection();var commentView = new CommentView({ commentCollection: commentCollection});$(.list-view).html(commentView.el);commentCollection.fetch();
  • 122. var commentCollection = new commentCollection();var commentView = new CommentView({ commentCollection: commentCollection});$(.list-view).html(commentView.el);commentCollection.fetch();
  • 123. var commentCollection = new commentCollection();var commentView = new CommentView({ commentCollection: commentCollection});$(.list-view).html(commentView.el);commentCollection.fetch();
  • 124. var CommentFormView = Backbone.View.extend({ events: { submit form: newComment }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$(form).serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$(input, textarea).val(); }});
  • 125. var CommentFormView = Backbone.View.extend({ events: { submit form: newComment }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$(form).serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$(input, textarea).val(); }});
  • 126. var CommentFormView = Backbone.View.extend({ events: { submit form: newComment }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$(form).serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$(input, textarea).val(); }});
  • 127. var CommentFormView = Backbone.View.extend({ events: { submit form: newComment }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$(form).serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$(input, textarea).val(); }});
  • 128. var CommentFormView = Backbone.View.extend({ events: { submit form: newComment }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$(form).serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$(input, textarea).val(); }});
  • 129. var CommentFormView = Backbone.View.extend({ events: { submit form: newComment }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$(form).serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$(input, textarea).val(); }});
  • 130. var CommentFormView = Backbone.View.extend({ events: { submit form: newComment }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$(form).serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$(input, textarea).val(); }});
  • 131. var CommentFormView = Backbone.View.extend({ events: { submit form: newComment }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$(form).serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$(input, textarea).val(); }});
  • 132. var CommentFormView = Backbone.View.extend({ events: { submit form: newComment }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$(form).serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$(input, textarea).val(); }});
  • 133. var CommentFormView = Backbone.View.extend({ events: { submit form: newComment }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$(form).serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$(input, textarea).val(); }});