JSGeneve - Backbone.js

Post on 27-May-2015

2.557 views 0 download

Preview:

Click to see full reader

Tags:

Report this document
SHARE

description

Introduction to Backbone.js

Transcript of JSGeneve - 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 = 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;

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

https://github.com/caillou/Backbone.js-Demo
https://github.com/caillou/Backbone.js-Demo

var Comment = Backbone.Model.extend({});

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

mailto:pierre@nelm.io
mailto:pierre@nelm.io

var Comment = Backbone.Model.extend({});

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

mailto:pierre@nelm.io
mailto:pierre@nelm.io

var Comment = Backbone.Model.extend({});

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

mailto:pierre@nelm.io
mailto:pierre@nelm.io

var Comment = Backbone.Model.extend({});

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

mailto:pierre@nelm.io
mailto:pierre@nelm.io

var Comment = Backbone.Model.extend({});

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

mailto:pierre@nelm.io
mailto:pierre@nelm.io

var Comment = Backbone.Model.extend({});

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

mailto:pierre@nelm.io
mailto:pierre@nelm.io

var newComment = new Comment({ text: 'Hello World'});

newComment.set({ name: 'Pierre Spring', email: 'pierre.spring@caillou.ch'});

newComment.get('name'); // Pierre Spring

var newComment = new Comment({ text: 'Hello World'});

newComment.set({ name: 'Pierre Spring', email: 'pierre.spring@caillou.ch'});

newComment.get('name'); // Pierre Spring

var newComment = new Comment({ text: 'Hello World'});

newComment.set({ name: 'Pierre Spring', email: 'pierre.spring@caillou.ch'});

newComment.get('name'); // Pierre Spring

var newComment = new Comment({ text: 'Hello World'});

newComment.set({ name: 'Pierre Spring', email: 'pierre.spring@caillou.ch'});

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

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

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

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

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

http://backbone.js/2%20Comments/
http://backbone.js/2%20Comments/
http://backbone.js/2%20Comments/
http://backbone.js/2%20Comments/
http://backbone.js/2%20Comments/
http://backbone.js/2%20Comments/

Top related

Rails & Backbone.js
 Technology
Drupal Backbone.js in the Frontend
 Technology
Essential Backbonesamples.leanpub.com/essential-backbonejs-sample.pdf · Essential Backbone.js Ian Chursky . ... Chapter 5: Using Templates in Backbone.js ... This book will give
 Documents
Basics of Backbone.js
 Technology
Taller backbone.js - Betabeers Córdoba (18/10/2012)
 Technology
Backbone.js Essentials - Sample Chapter
 Technology
JavaScript Application Architecture with Backbone.js
 Technology
JSDay Italy - Backbone.js
 Technology
Intro to Backbone.js with Rails
 Technology
Mastering Backbone.js - Sample Chapter
 Documents
Building Backbone.js
 Documents
Deep Dive into Backbone.js Internals + Underscore.js
 Documents
Backbone.js versus AngularJS
 Software
MVC & backbone.js
 Technology
Is There Still Room for Backbone.js
 Software
jQuery Mobile, Backbone.js, and ASP.NET MVC
 Technology
Drupal services and the tasty backbone.js
 Documents
Client-side MVC with Backbone.js (reloaded)
 Technology
Refactoring Large Web Applications with Backbone.js
 Internet
Structuring web applications with Backbone.js
 Software

Copyright © 2022 FDOCUMENTS