O documento apresenta uma introdução ao framework JavaScript Backbone.js, descrevendo suas principais características como models, views, eventos e router. É apresentada a estrutura básica de uma aplicação Backbone com ênfase nos modelos, coleções, views e eventos e como eles se relacionam. Por fim, algumas funcionalidades ausentes no Backbone e alternativas como o Marionette são discutidas.
3. Introdução
● Estrutura mínima para uma app decente
● Release inicial 10/2010
● MV alguma coisa
○ Porque sempre tem MV?
● Única dependência: Underscore.js
○ Para usar router e persistência: jQuery ou Zepto
● Comunidade: suficiente
4. Básico - Características
Backbone.js gives structure to web 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 API over a RESTful JSON interface.
5. Básico - Model
// Our basic **Todo** model has `title`, `order`, and `completed` attributes.
app.Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
},
// Toggle the `completed` state of this todo item.
toggle: function () {
this.save({completed: !this.get('completed')});
}
});
var todo1 = new app.Todo({title: 'First title', order: 1});
9. Básico - Model - Persistência
app.Todo = Backbone.Model.extend({
urlRoot: '/todos'
});
var todo2 = new app.Todo({title: 'First title', order: 1});
var todo3 = new app.Todo({id: 5, title: 'First title', order:
1});
todo2.url(); // "/todos"
todo3.url(); // "/todos/5"
10. Básico - Model - Collections
app.TodosCollection = Backbone.Collection.extend({
model: app.Todo
});
var todos = new app.TodosCollection([todo2, todo3]);
todos.length; // 2
todos.fetch();
todos.create({});
todos.add(todo2);
Backbone.sync(method, model, options);
E diversos métodos do Underscore.js.
11. Básico - View
● Duas partes
○ Declarativa
■ el
■ model binding
■ events
○ Procedural
■ render
■ Controller
12. Básico - View
app.TodoView = Backbone.View.extend({
el: '#todo',
events: {
'keypress .edit': 'updateOnEnter',
'blur .edit':
'close'
},
render: function() {
return this.$el.html( TemplateEngine.run( this.model.toJSON() ) );
},
close: function() { // executed when todo loses focus },
updateOnEnter: function( e ) { // executed on each keypress when in todo edit mode }
});
var todoView = new app.TodoView({model: todo2});
todoview.render();
15. Além do Backbone
● Funcionalidade ausentes
○ Atributos virtuais
○ Hierarquia nas views
○ Form validation
● Marionette
○ Seta alguns padrões como o template
○ Facilita as views
■ Subview, regions, layout
● Crescimento da aplicação