Backbone.js Simple Tutorial
Download as KEY, PDF27 likes4,662 views
Backbone.js provides structure to JavaScript applications by supplying models, collections, views and connecting them via a RESTful JSON interface. It offers models with key-value binding and events, collections with enumerable functions, and views with declarative event handling. Templates can be used to render views by passing a model's JSON representation. Routers help manage navigation and application state.
![var Item = Backbone.Model.extend({
urlRoot: '/todos'
POST
});
var item = new Item({
title: 'Create new todo'
});
• Backbone.Model.extend(properties,
item.save();
[classProperties])
• model.save([attributes], [options])
• model.url()
• model.urlRoot
• /urlRoot/id](https://image.slidesharecdn.com/tutorial-01slideshare-110801214408-phpapp02/85/Backbone-js-Simple-Tutorial-5-320.jpg)
![var Item = Backbone.Model.extend({
urlRoot: '/todos'
PUT
});
var item = new Item({
title: 'Create another todo'
});
• _.bind(function, object, [*arguments])
item.save(); • _.delay(function, wait, [*arguments])
var save = _.bind(item.save, item);
_.delay(save, 5000, {title: 'Title updated'});](https://image.slidesharecdn.com/tutorial-01slideshare-110801214408-phpapp02/85/Backbone-js-Simple-Tutorial-6-320.jpg)
![var Item = Backbone.Model.extend({
urlRoot: '/todos'
DELETE
});
var item = new Item({
title: 'This will be deleted'
});
• model.destroy([options])
item.save();
_.delay(_.bind(item.destroy, item), 5000);](https://image.slidesharecdn.com/tutorial-01slideshare-110801214408-phpapp02/85/Backbone-js-Simple-Tutorial-7-320.jpg)
![var Item = Backbone.Model.extend({
urlRoot: '/todos'
GET
});
var ItemView = Backbone.View.extend({
tagName: 'li',
initialize: function() { • Backbone.View.extend(properties,
this.model.bind('change', this.render, this);
[classProperties])
},
• model.fetch([options])
render: function() {
this.el.innerHTML = this.model.get('title');
• model.get(attribute)
return this; • object.bind(event, callback, [context])
}
});
var item = new Item({id: 1});
item.fetch();
var itemView = new ItemView({model: item});
$('#todos').append(itemView.el);](https://image.slidesharecdn.com/tutorial-01slideshare-110801214408-phpapp02/85/Backbone-js-Simple-Tutorial-8-320.jpg)
![var Item = Backbone.Model.extend(); Collection
var ItemView = Backbone.View.extend({
tagName: 'li',
initialize: function() {
this.model.bind('change', this.render, this);
}, • Backbone.Collection.extend(properties,
render: function() { [classProperties])
this.el.innerHTML = this.model.get('title');
return this;
• collection.fetch([options])
} • collection.model
});
• collection.url or collection.url()](https://image.slidesharecdn.com/tutorial-01slideshare-110801214408-phpapp02/85/Backbone-js-Simple-Tutorial-9-320.jpg)
![var Item = Backbone.Model.extend();
var List = Backbone.Collection.extend({
Collection
var ItemView = Backbone.View.extend({
model: Item,
tagName: 'li',
url : '/todos'
});
initialize: function() {
var ListView = Backbone.View.extend({
this.model.bind('change', this.render, this);
}, el: $('#todos'), • Backbone.Collection.extend(properties,
initialize: function() {
render: function() {
this.collection.bind('reset', this.render, this); [classProperties])
this.el.innerHTML = this.model.get('title');
this.collection.fetch(); • collection.fetch([options])
return this;
},
} • collection.model
}); render: function() {
var el = this.el; • collection.url or collection.url()
this.collection.each(function(item) {
var itemView = new ItemView({model: item});
el.append(itemView.render().el);
});
return this;
}
});
new ListView({collection: new List});](https://image.slidesharecdn.com/tutorial-01slideshare-110801214408-phpapp02/85/Backbone-js-Simple-Tutorial-10-320.jpg)
![var Router = Backbone.Router.extend({
routes: {
Router
'*action': 'actionCallback'
},
actionCallback: function(action) {
document.body.innerHTML = action;
} • Backbone.Router.extend(properties,
}); [classProperties])
var router = new Router(); • router.navigate(fragment, [triggerRoute])
Backbone.history.start(); • Backbone.history.start([options])
router.navigate('started', true);
• URL Fragment
var navigate = _.bind(router.navigate, router);
_.delay(navigate, 3000, 'moved', true); • history.pushState / popState
• window.onhashchange
• IE8
• polling if not supported](https://image.slidesharecdn.com/tutorial-01slideshare-110801214408-phpapp02/85/Backbone-js-Simple-Tutorial-11-320.jpg)
![<script type="text/template" id="item-template">
<p class="done">
Template
<input type="checkbox" <% if (done) { %>checked<% } %>>
</p>
<p class="title"><%= title %></p>
<p class="commands">
<button class="edit">Edit</button>
<button class="remove">Remove</button>
</p> • _.template(templateString, [context])
</script>
• model.toJSON()](https://image.slidesharecdn.com/tutorial-01slideshare-110801214408-phpapp02/85/Backbone-js-Simple-Tutorial-12-320.jpg)
![<script type="text/template" id="item-template">
<p class="done">
var Item = Backbone.Model.extend({
Template
<input type="checkbox" <% if (done) { %>checked<% } %>>
urlRoot: '/todos'
</p>
});
<p class="title"><%= title %></p>
<p class="commands">
var ItemView = Backbone.View.extend({
<button class="edit">Edit</button>
tagName: 'li',
<button class="remove">Remove</button>
</p>
template: _.template($('#item-template').html()),
• _.template(templateString, [context])
</script>
initialize: function() {
• model.toJSON()
this.model.bind('change', this.render, this);
},
render: function() {
this.el.innerHTML = this.template(this.model.toJSON());
return this;
}
});
var item = new Item({id: 1});
item.fetch();
var itemView = new ItemView({model: item});
$('#todos').append(itemView.el);](https://image.slidesharecdn.com/tutorial-01slideshare-110801214408-phpapp02/85/Backbone-js-Simple-Tutorial-13-320.jpg)
Backbone.js Simple Tutorial
- 1. Backbone.js Simple Tutorial by @fallroot
- 2. Backbone.js Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
- 3. $ rails new todoapp Back-end $ cd todoapp $ rm public/index.html $ rails g scaffold todo title:string done:boolean • Ruby on Rails $ rake db:migrate • 3.1.0 RC5 $ rails s
- 4. <script type="text/template"></script> Dependency <script src="jquery.js / zepto.js"></script> <script src="underscore.js"></script> <script src="backbone.js"></script> <script src="my-scripts.js"></script>
- 5. var Item = Backbone.Model.extend({ urlRoot: '/todos' POST }); var item = new Item({ title: 'Create new todo' }); • Backbone.Model.extend(properties, item.save(); [classProperties]) • model.save([attributes], [options]) • model.url() • model.urlRoot • /urlRoot/id
- 6. var Item = Backbone.Model.extend({ urlRoot: '/todos' PUT }); var item = new Item({ title: 'Create another todo' }); • _.bind(function, object, [*arguments]) item.save(); • _.delay(function, wait, [*arguments]) var save = _.bind(item.save, item); _.delay(save, 5000, {title: 'Title updated'});
- 7. var Item = Backbone.Model.extend({ urlRoot: '/todos' DELETE }); var item = new Item({ title: 'This will be deleted' }); • model.destroy([options]) item.save(); _.delay(_.bind(item.destroy, item), 5000);
- 8. var Item = Backbone.Model.extend({ urlRoot: '/todos' GET }); var ItemView = Backbone.View.extend({ tagName: 'li', initialize: function() { • Backbone.View.extend(properties, this.model.bind('change', this.render, this); [classProperties]) }, • model.fetch([options]) render: function() { this.el.innerHTML = this.model.get('title'); • model.get(attribute) return this; • object.bind(event, callback, [context]) } }); var item = new Item({id: 1}); item.fetch(); var itemView = new ItemView({model: item}); $('#todos').append(itemView.el);
- 9. var Item = Backbone.Model.extend(); Collection var ItemView = Backbone.View.extend({ tagName: 'li', initialize: function() { this.model.bind('change', this.render, this); }, • Backbone.Collection.extend(properties, render: function() { [classProperties]) this.el.innerHTML = this.model.get('title'); return this; • collection.fetch([options]) } • collection.model }); • collection.url or collection.url()
- 10. var Item = Backbone.Model.extend(); var List = Backbone.Collection.extend({ Collection var ItemView = Backbone.View.extend({ model: Item, tagName: 'li', url : '/todos' }); initialize: function() { var ListView = Backbone.View.extend({ this.model.bind('change', this.render, this); }, el: $('#todos'), • Backbone.Collection.extend(properties, initialize: function() { render: function() { this.collection.bind('reset', this.render, this); [classProperties]) this.el.innerHTML = this.model.get('title'); this.collection.fetch(); • collection.fetch([options]) return this; }, } • collection.model }); render: function() { var el = this.el; • collection.url or collection.url() this.collection.each(function(item) { var itemView = new ItemView({model: item}); el.append(itemView.render().el); }); return this; } }); new ListView({collection: new List});
- 11. var Router = Backbone.Router.extend({ routes: { Router '*action': 'actionCallback' }, actionCallback: function(action) { document.body.innerHTML = action; } • Backbone.Router.extend(properties, }); [classProperties]) var router = new Router(); • router.navigate(fragment, [triggerRoute]) Backbone.history.start(); • Backbone.history.start([options]) router.navigate('started', true); • URL Fragment var navigate = _.bind(router.navigate, router); _.delay(navigate, 3000, 'moved', true); • history.pushState / popState • window.onhashchange • IE8 • polling if not supported
- 12. <script type="text/template" id="item-template"> <p class="done"> Template <input type="checkbox" <% if (done) { %>checked<% } %>> </p> <p class="title"><%= title %></p> <p class="commands"> <button class="edit">Edit</button> <button class="remove">Remove</button> </p> • _.template(templateString, [context]) </script> • model.toJSON()
- 13. <script type="text/template" id="item-template"> <p class="done"> var Item = Backbone.Model.extend({ Template <input type="checkbox" <% if (done) { %>checked<% } %>> urlRoot: '/todos' </p> }); <p class="title"><%= title %></p> <p class="commands"> var ItemView = Backbone.View.extend({ <button class="edit">Edit</button> tagName: 'li', <button class="remove">Remove</button> </p> template: _.template($('#item-template').html()), • _.template(templateString, [context]) </script> initialize: function() { • model.toJSON() this.model.bind('change', this.render, this); }, render: function() { this.el.innerHTML = this.template(this.model.toJSON()); return this; } }); var item = new Item({id: 1}); item.fetch(); var itemView = new ItemView({model: item}); $('#todos').append(itemView.el);
- 14. All Together
- 15. Conclusion • For JavaScript Heavy Application • Single-Page Application • Skinny Back-end • RESTful JSON Interface