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 = Backbone.Model.extend({ say: 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: '[email protected]', text: 'Hello World'});

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

newComment.set({ name: 'Pierre Spring', email: '[email protected]'});

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

var newComment = new Comment({ /* … */ });

newComment.save();

var Comment = Backbone.Model.extend({ url: '/api/comment/'});

newComment.save();

var Comment = Backbone.Model.extend({ localStorage: new Store("comment")});

newComment.save();

var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { }});

newComment.save();

var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { if (!options.date) { this.set({ date: moment().toString() }); } }});

newComment.save();

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

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

Technology

Transcript of JSDay Italy - Backbone.js