Introduction to Backbone.js

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, 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!

11. 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!

12. 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!

15. var Animal = Backbone.Model.extend({
say: function () {}
});
var Dog = Animal.extend({
bark: function () {}
});

16. var Animal = Backbone.Model.extend({
say: function () {}
});
var Dog = Animal.extend({
bark: function () {}
});

17. var Animal = Backbone.Model.extend({
say: function () {}
});
var Dog = Animal.extend({
bark: function () {}
});

18. var Animal = Backbone.Model.extend({
say: function () {}
});
var Dog = Animal.extend({
bark: function () {}
});

19. var Animal = Backbone.Model.extend({
say: function () {}
});
var Dog = Animal.extend({
bark: function () {}
});

20. var Animal = Backbone.Model.extend({
say: function () {}
});
var Dog = Animal.extend({
bark: function () {}
});

21. var Dog = Animal.extend({
bark: function () {}
});
var myDog = new Dog({
name: 'Bello'
});

22. var Dog = Animal.extend({
bark: function () {}
});
var myDog = new Dog({
name: 'Bello'
});

23. // 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;

24. // 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;

25. // 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;

26. // 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;

27. // 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;

32. var AppRouter = Backbone.Router.extend({
routes: {
'': 'index',
'q?:query': 'query',
'show/:id': 'show'
},
index: function () {},
query: function (queryString) {},
show: function (id) {}
});

33. var AppRouter = Backbone.Router.extend({
routes: {
'': 'index',
'q?:query': 'query',
'show/:id': 'show'
},
index: function () {},
query: function (queryString) {},
show: function (id) {}
});

34. var AppRouter = Backbone.Router.extend({
routes: {
'': 'index',
'q?:query': 'query',
'show/:id': 'show'
},
index: function () {},
query: function (queryString) {},
show: function (id) {}
});

35. var AppRouter = Backbone.Router.extend({
routes: {
'': 'index',
'q?:query': 'query',
'show/:id': 'show'
},
index: function () {},
query: function (queryString) {},
show: function (id) {}
});

36. var AppRouter = Backbone.Router.extend({
routes: {
'': 'index',
'q?:query': 'query',
'show/:id': 'show'
},
index: function () {},
query: function (queryString) {},
show: function (id) {}
});

37. var AppRouter = Backbone.Router.extend({
routes: {
'': 'index',
'q?:query': 'query',
'show/:id': 'show'
},
index: function () {},
query: function (queryString) {},
show: function (id) {}
});

38. var AppRouter = Backbone.Router.extend({
routes: {
'': 'index',
'q?:query': 'query',
'show/:id': 'show'
},
index: function () {},
query: function (queryString) {},
show: function (id) {}
});

39. var AppRouter = Backbone.Router.extend({
routes: {
'': 'index',
'q?:query': 'query',
'show/:id': 'show'
},
index: function () {},
query: function (queryString) {},
show: function (id) {}
});

40. var AppRouter = Backbone.Router.extend({
routes: {
'': 'index',
'q?:query': 'query',
'show/:id': 'show'
},
index: function () {},
query: function (queryString) {},
show: function (id) {}
});

41. var AppRouter = Backbone.Router.extend({
routes: {
'': 'index',
'q?:query': 'query',
'show/:id': 'show'
},
index: function () {},
query: function (queryString) {},
show: function (id) {}
});

42. 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) {}
});

43. 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) {}
});

44. var AppRouter = Backbone.Router.extend({
// …
});
new AppRouter();
Backbone.history.start();

45. var AppRouter = Backbone.Router.extend({
// …
});
new AppRouter();
Backbone.history.start();

46. var AppRouter = Backbone.Router.extend({
// …
});
new AppRouter();
Backbone.history.start();

50. var Comment = Backbone.Model.extend({});
var newComment = new Comment({
name: 'Pierre Spring',
email: 'pierre@nelm.io',
text: 'Hello World'
});

51. var Comment = Backbone.Model.extend({});
var newComment = new Comment({
name: 'Pierre Spring',
email: 'pierre@nelm.io',
text: 'Hello World'
});

52. var Comment = Backbone.Model.extend({});
var newComment = new Comment({
name: 'Pierre Spring',
email: 'pierre@nelm.io',
text: 'Hello World'
});

53. var Comment = Backbone.Model.extend({});
var newComment = new Comment({
name: 'Pierre Spring',
email: 'pierre@nelm.io',
text: 'Hello World'
});

54. var Comment = Backbone.Model.extend({});
var newComment = new Comment({
name: 'Pierre Spring',
email: 'pierre@nelm.io',
text: 'Hello World'
});

55. var Comment = Backbone.Model.extend({});
var newComment = new Comment({
name: 'Pierre Spring',
email: 'pierre@nelm.io',
text: 'Hello World'
});

56. var newComment = new Comment({
text: 'Hello World'
});
newComment.set({
name: 'Pierre Spring',
email: 'pierre.spring@caillou.ch'
});
newComment.get('name'); // Pierre Spring

57. var newComment = new Comment({
text: 'Hello World'
});
newComment.set({
name: 'Pierre Spring',
email: 'pierre.spring@caillou.ch'
});
newComment.get('name'); // Pierre Spring

58. var newComment = new Comment({
text: 'Hello World'
});
newComment.set({
name: 'Pierre Spring',
email: 'pierre.spring@caillou.ch'
});
newComment.get('name'); // Pierre Spring

59. var newComment = new Comment({
text: 'Hello World'
});
newComment.set({
name: 'Pierre Spring',
email: 'pierre.spring@caillou.ch'
});
newComment.get('name'); // Pierre Spring

60. var Comment = Backbone.Model.extend({});
var newComment = new Comment({ /* … */ });
newComment.save();

61. var Comment = Backbone.Model.extend({
url: '/api/comment/'
});
var newComment = new Comment({ /* … */ });
newComment.save();

63. var Comment = Backbone.Model.extend({
localStorage: new Store("comment")
});
var newComment = new Comment({ /* … */ });
newComment.save();

64. var Comment = Backbone.Model.extend({
localStorage: new Store("comment"),
initialize: function (options) {
}
});
var newComment = new Comment({ /* … */ });
newComment.save();

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

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

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

69. 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();
}
});

70. 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();
}
});

71. 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();
}
});

72. 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();
}
});

73. var newComment = new Comment({ /* … */ });
newComment.getDisplayDate();
// a few seconds ago

74. Backbone.Collection.extend({
model: CommentModel,
localStorage: new Store("comment")
});

75. Backbone.Collection.extend({
model: CommentModel,
localStorage: new Store("comment")
});

76. Backbone.Collection.extend({
model: CommentModel,
localStorage: new Store("comment")
});

77. Backbone.Collection.extend({
model: CommentModel,
localStorage: new Store("comment")
});

78. Backbone.Collection.extend({
model: CommentModel,
localStorage: new Store("comment")
});

79. var CommentCollection = Backbone.Collection.extend({
/* … */
});
var commentCollection = new CommentCollection();
commentCollection.fetch();
commentCollection.each(function (commentModel) {
// do s.th.
});

80. var CommentCollection = Backbone.Collection.extend({
/* … */
});
var commentCollection = new CommentCollection();
commentCollection.fetch();
commentCollection.each(function (commentModel) {
// do s.th.
});

81. var CommentCollection = Backbone.Collection.extend({
/* … */
});
var commentCollection = new CommentCollection();
commentCollection.fetch();
commentCollection.each(function (commentModel) {
// do s.th.
});

82. var CommentCollection = Backbone.Collection.extend({
/* … */
});
var commentCollection = new CommentCollection();
commentCollection.fetch();
commentCollection.each(function (commentModel) {
// do s.th.
});

84. var CommentCollection = Backbone.Collection.extend({
/* … */
});
var commentCollection = new CommentCollection();
commentCollection.fetch();
commentCollection.each(function (commentModel) {
// do s.th.
});

85. var newComment = new Comment({ /* … */ });
newComment.save();
commentCollection.add(newComment);

86. var newComment = new Comment({ /* … */ });
newComment.save();
commentCollection.add(newComment);

87. var newComment = new Comment({ /* … */ });
newComment.save();
commentCollection.add(newComment);

88. var newComment = new Comment({ /* … */ });
newComment.save();
commentCollection.add(newComment);

89. var newComment = new Comment({ /* … */ });
newComment.save();
commentCollection.add(newComment);
var newComment = commentCollection.create({
/* model attributes */
});

90. newComment.bind(
'change',
function (model) {}
);
newComment.bind(
'change:name',
function (model, attribute) {}
);
commentCollection.bind(
'reset',
function (commentCollection) {}
);
commentCollection.bind(
'add',
function (commentModel) {}
);

91. newComment.bind(
'change',
function (model) {}
);
newComment.bind(
'change:name',
function (model, attribute) {}
);
commentCollection.bind(
'reset',
function (commentCollection) {}
);
commentCollection.bind(
'add',
function (commentModel) {}
);

92. newComment.bind(
'change',
function (model) {}
);
newComment.bind(
'change:name',
function (model, attribute) {}
);
commentCollection.bind(
'reset',
function (commentCollection) {}
);
commentCollection.bind(
'add',
function (commentModel) {}
);

93. newComment.bind(
'change',
function (model) {}
);
newComment.bind(
'change:name',
function (model, attribute) {}
);
commentCollection.bind(
'reset',
function (commentCollection) {}
);
commentCollection.bind(
'add',
function (commentModel) {}
);

94. newComment.bind(
'change',
function (model) {}
);
newComment.bind(
'change:name',
function (model, attribute) {}
);
commentCollection.bind(
'reset',
function (commentCollection) {}
);
commentCollection.bind(
'add',
function (commentModel) {}
);

95. newComment.bind(
'change',
function (model) {}
);
newComment.bind(
'change:name',
function (model, attribute) {}
);
commentCollection.bind(
'reset',
function (commentCollection) {}
);
commentCollection.bind(
'add',
function (commentModel) {}
);

96. newComment.bind(
'change',
function (model) {}
);
newComment.bind(
'change:name',
function (model, attribute) {}
);
commentCollection.bind(
'reset',
function (commentCollection) {}
);
commentCollection.bind(
'add',
function (commentModel) {}
);

97. newComment.bind(
'change',
function (model) {}
);
newComment.bind(
'change:name',
function (model, attribute) {}
);
commentCollection.bind(
'reset',
function (commentCollection) {}
);
commentCollection.bind(
'add',
function (commentModel) {}
);

98. newComment.bind(
'change',
function (model) {}
);
newComment.bind(
'change:name',
function (model, attribute) {}
);
commentCollection.bind(
'reset',
function (commentCollection) {}
);
commentCollection.bind(
'add',
function (commentModel) {}
);

99. newComment.bind(
'change',
function (model) {}
);
newComment.bind(
'change:name',
function (model, attribute) {}
);
commentCollection.bind(
'reset',
function (commentCollection) {}
);
commentCollection.bind(
'add',
function (commentModel) {}
);

100. newComment.bind(
'change',
function (model) {}
);
newComment.bind(
'change:name',
function (model, attribute) {}
);
commentCollection.bind(
'reset',
function (commentCollection) {}
);
commentCollection.bind(
'add',
function (commentModel) {}
);

102. var CommentView = Backbone.View.extend({});
var commentView = new CommentView();
console.log(commentView.el);
// <div></div>

103. var CommentView = Backbone.View.extend({});
var commentView = new CommentView();
console.log(commentView.el);
// <div></div>

104. var CommentView = Backbone.View.extend({});
var commentView = new CommentView();
console.log(commentView.el);
// <div></div>

105. var CommentView = Backbone.View.extend({});
var commentView = new CommentView();
console.log(commentView.el);
// <div></div>

106. var CommentView = Backbone.View.extend({});
var commentView = new CommentView();
console.log(commentView.el);
// <div></div>

107. 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"/>

108. 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"/>

109. 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"/>

110. 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"/>

111. var CommentView = Backbone.View.extend({
el: $('#comment-list')
});
var commentView = new CommentView();
console.log(commentView.el);

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
});

121. var commentCollection = new commentCollection();
var commentView = new CommentView({
commentCollection: commentCollection
});

122. 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()
})
);
}
});

123. 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()
})
);
}
});

124. 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()
})
);
}
});

125. 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()
})
);
}
});

126. 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()
})
);
}
});

127. 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()
})
);
}
});

128. 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()
})
);
}
});

129. 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()
})
);
}
});

130. 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()
})
);
}
});

131. 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()
})
);
}
});

132. 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()
})
);
}
});

133. 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()
})
);
}
});

134. 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()
})
);
}
});

135. 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()
})
);
}
});

136. var commentCollection = new commentCollection();
var commentView = new CommentView({
commentCollection: commentCollection
});
$('.list-view').html(commentView.el);
commentCollection.fetch();

137. var commentCollection = new commentCollection();
var commentView = new CommentView({
commentCollection: commentCollection
});
$('.list-view').html(commentView.el);
commentCollection.fetch();

138. var commentCollection = new commentCollection();
var commentView = new CommentView({
commentCollection: commentCollection
});
$('.list-view').html(commentView.el);
commentCollection.fetch();

139. var commentCollection = new commentCollection();
var commentView = new CommentView({
commentCollection: commentCollection
});
$('.list-view').html(commentView.el);
commentCollection.fetch();

140. 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('');
}
});

141. 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('');
}
});

142. 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('');
}
});

143. 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('');
}
});

144. 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('');
}
});

145. 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('');
}
});

146. 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('');
}
});

147. 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('');
}
});

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

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