SlideShare a Scribd company logo

JSDay Italy - Backbone.js

•
•
Pierre Spring
Pierre Spring

The document defines a Comment model and CommentCollection in Backbone.js. The Comment model stores individual comments with attributes like name, email, text, and date. It uses localStorage to save models. The CommentCollection manages multiple Comment models and also uses localStorage. New comments can be added to the collection after saving individual models. Models trigger events like 'change' when data changes.

1 of 207
Downloaded 67 times
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
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!
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!
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!
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!
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!
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!
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!
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!
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!
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
var Dog = Animal.extend({ bark: function () {} }); var myDog = new Dog({ name: 'Bello' });
var Dog = Animal.extend({ bark: function () {} }); var myDog = new Dog({ name: 'Bello' });
// 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;
// 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;
// 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;
// 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;
// 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;
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
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) {} });
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) {} });
var AppRouter = Backbone.Router.extend({ // … }); new AppRouter(); Backbone.history.start();
var AppRouter = Backbone.Router.extend({ // … }); new AppRouter(); Backbone.history.start();
var AppRouter = Backbone.Router.extend({ // … }); new AppRouter(); Backbone.history.start();
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: 'pierre@nelm.io' }); newComment.get('name'); // Pierre Spring
var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: 'pierre@nelm.io' }); newComment.get('name'); // Pierre Spring
var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: 'pierre@nelm.io' }); newComment.get('name'); // Pierre Spring
var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: 'pierre@nelm.io' }); newComment.get('name'); // Pierre Spring
var Comment = Backbone.Model.extend({}); var newComment = new Comment({ /* … */ }); newComment.save();
var Comment = Backbone.Model.extend({ url: '/api/comment/' }); var newComment = new Comment({ /* … */ }); newComment.save();
JSDay Italy - Backbone.js
var Comment = Backbone.Model.extend({ localStorage: new Store("comment") }); var newComment = new Comment({ /* … */ }); newComment.save();
var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { } }); var newComment = new Comment({ /* … */ }); newComment.save();
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();
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();
JSDay Italy - Backbone.js
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();
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(); } });
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(); } });
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(); } });
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(); } });
var newComment = new Comment({ /* … */ }); newComment.getDisplayDate(); // a few seconds ago
Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
JSDay Italy - Backbone.js
var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment); var newComment = commentCollection.create({ /* model attributes */ });
newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
JSDay Italy - Backbone.js
var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
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"/>
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"/>
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"/>
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"/>
var CommentView = Backbone.View.extend({ el: $('#comment-list') }); var commentView = new CommentView(); console.log(commentView.el);
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection });
var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection });
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
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() }) ); } });
var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
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(''); } });
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(''); } });
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(''); } });
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(''); } });
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(''); } });
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(''); } });
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(''); } });
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(''); } });
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(''); } });
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(''); } });
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js

More Related Content

JSDay Italy - Backbone.js

  • 33. 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!
  • 34. 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!
  • 35. 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!
  • 36. 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!
  • 37. 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!
  • 38. 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!
  • 39. 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!
  • 40. 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!
  • 41. 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!
  • 44. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 45. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 46. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 47. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 48. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 49. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 50. var Dog = Animal.extend({ bark: function () {} }); var myDog = new Dog({ name: 'Bello' });
  • 51. var Dog = Animal.extend({ bark: function () {} }); var myDog = new Dog({ name: 'Bello' });
  • 52. // 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;
  • 53. // 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;
  • 54. // 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;
  • 55. // 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;
  • 56. // 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;
  • 76. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 77. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 78. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 79. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 80. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 81. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 82. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 83. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 84. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 85. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 86. 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) {} });
  • 87. 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) {} });
  • 88. var AppRouter = Backbone.Router.extend({ // … }); new AppRouter(); Backbone.history.start();
  • 89. var AppRouter = Backbone.Router.extend({ // … }); new AppRouter(); Backbone.history.start();
  • 90. var AppRouter = Backbone.Router.extend({ // … }); new AppRouter(); Backbone.history.start();
  • 95. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: '[email protected]', text: 'Hello World' });
  • 96. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: '[email protected]', text: 'Hello World' });
  • 97. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: '[email protected]', text: 'Hello World' });
  • 98. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: '[email protected]', text: 'Hello World' });
  • 99. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: '[email protected]', text: 'Hello World' });
  • 100. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: '[email protected]', text: 'Hello World' });
  • 101. var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: '[email protected]' }); newComment.get('name'); // Pierre Spring
  • 102. var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: '[email protected]' }); newComment.get('name'); // Pierre Spring
  • 103. var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: '[email protected]' }); newComment.get('name'); // Pierre Spring
  • 104. var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: '[email protected]' }); newComment.get('name'); // Pierre Spring
  • 105. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ /* … */ }); newComment.save();
  • 106. var Comment = Backbone.Model.extend({ url: '/api/comment/' }); var newComment = new Comment({ /* … */ }); newComment.save();
  • 108. var Comment = Backbone.Model.extend({ localStorage: new Store("comment") }); var newComment = new Comment({ /* … */ }); newComment.save();
  • 109. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { } }); var newComment = new Comment({ /* … */ }); newComment.save();
  • 110. 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();
  • 111. 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();
  • 113. 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();
  • 114. 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(); } });
  • 115. 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(); } });
  • 116. 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(); } });
  • 117. 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(); } });
  • 118. var newComment = new Comment({ /* … */ }); newComment.getDisplayDate(); // a few seconds ago
  • 119. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
  • 120. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
  • 121. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
  • 122. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
  • 123. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
  • 124. var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
  • 125. var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
  • 126. var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
  • 127. var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
  • 129. var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
  • 130. var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
  • 131. var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
  • 132. var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
  • 133. var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
  • 134. var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment); var newComment = commentCollection.create({ /* model attributes */ });
  • 135. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 136. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 137. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 138. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 139. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 140. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 141. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 142. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 143. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 144. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 145. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 147. var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
  • 148. var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
  • 149. var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
  • 150. var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
  • 151. var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
  • 152. 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"/>
  • 153. 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"/>
  • 154. 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"/>
  • 155. 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"/>
  • 156. var CommentView = Backbone.View.extend({ el: $('#comment-list') }); var commentView = new CommentView(); console.log(commentView.el);
  • 157. 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() }) ); } });
  • 158. 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() }) ); } });
  • 159. 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() }) ); } });
  • 160. 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() }) ); } });
  • 161. 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() }) ); } });
  • 162. 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() }) ); } });
  • 163. 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() }) ); } });
  • 164. 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() }) ); } });
  • 165. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection });
  • 166. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection });
  • 167. 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() }) ); } });
  • 168. 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() }) ); } });
  • 169. 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() }) ); } });
  • 170. 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() }) ); } });
  • 171. 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() }) ); } });
  • 172. 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() }) ); } });
  • 173. 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() }) ); } });
  • 174. 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() }) ); } });
  • 175. 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() }) ); } });
  • 176. 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() }) ); } });
  • 177. 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() }) ); } });
  • 178. 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() }) ); } });
  • 179. 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() }) ); } });
  • 180. 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() }) ); } });
  • 181. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
  • 182. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
  • 183. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
  • 184. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
  • 185. 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(''); } });
  • 186. 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(''); } });
  • 187. 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(''); } });
  • 188. 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(''); } });
  • 189. 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(''); } });
  • 190. 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(''); } });
  • 191. 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(''); } });
  • 192. 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(''); } });
  • 193. 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(''); } });
  • 194. 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(''); } });