BACKBONE.JS 101
Tip of the Iceberg
Rise of Backbone
Backbone Apps
- Trello
- Tripidph
- Foodspotting
- Redditjs
- Stripe
https://github.com/jashkenas/backbone/wiki/Projects-and-Companies-using-Backbone
Topics
- Creating model in vanilla js
- Backbone model and collection, what's the difference
- Models, Collections, Views and Routes
- Model views and Collection views
- DOM events in Backbone
- Pub/sub
- Modular code structure using AMD and textjs
Get your truth out of the DOM
Creating model in vanilla js
var Person = function(config) {
this.name = config.name;this.age = config.age;this.occupation = config.occupation;
}
Person.prototype.work = function() {
return this.name + ' is working';
}
Model
var Person = Backbone.Model.extend({
defaults: {
age: 20,
name: 'Barry Lavides',occupation: 'Web Developer'
},work: function() {
return this.get('name') + ' is working';
}
});
Collection
var People = Backbone.View.extend({
model: Person
})
model: Person
Views
var PersonView = Backbone.View.extend({
tagName: 'li',
id: 'person',
initialize: () {
},
render: function() {
}
})
tagName: 'li',id: 'person',
initialize: () {},render: function() {}
Views
var PeopleView = Backbone.View.extend({
tagName: 'ul,
initialize: () {
},
render: function() {
}
})
tagName: 'ul,
initialize: () {},render: function() {}
Route
var Route = Backbone.Router.extend({
routes: {
'':'index'
},index: function() {}
})
DOM Events
var PersonView = Backbone.View.extend({
events: {
'click': 'submit'
},submit: function() {}
})
Pub/Sub
Model
var PersonView = Backbone.View.extend({
initialize: function() {
this.model.on('change', this.render, this);this.model.on('destroy', this.remove, this);
}
})
Pub/Sub
Collection
var peopleView = Backbone.View.extend({
initialize: function() {
this.collection.on('add', this.addOne, this);
}
})