+ Follow

JSGeneve - Backbone.js

by Pierre Spring

2,086 views

Introduction to Backbone.js

Accessibility

View text version

Upload Details

Uploaded via SlideShare as Adobe PDF

Usage Rights

File a copyright complaint

5 Embeds 255

http://mehrjs.com	228
http://a0.twimg.com	18
http://www.mehrjs.com	5
http://bottlenose.local	3
http://webcache.googleusercontent.com	1

Statistics

Likes: 12
Downloads: 77
Comments: 0
Embed Views: 255
Views on SlideShare: 1,831
Total Views: 2,086

JSGeneve - Backbone.js Presentation Transcript

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

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

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

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.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 newComment = new Comment({ /* … */ });newComment.getDisplayDate();// a few seconds ago

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

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({ el: $(#comment-list)});var commentView = new CommentView();console.log(commentView.el);

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

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