Backbone.js es una librería JavaScript que nos permite crear aplicaciones siguiendo el patrón MVC. En este tutorial crearemos una aplicación desde cero con Backbone.js para familiarizarnos con el framework. Veremos como estructurar aplicaciones utilizando las colecciones, modelos, vistas y routers de Backbone. Se puede descargar el código final y tenerlo como referencia para empezar a crear vuestras aplicaciones. Se asumen conocimientos básicos de HTML/CSS y Javascript.

1. Backbone.js a través de un caso práctico
Presentación basada en el curso
Introducción a Backbone.js de easynube
Consíguelo gratis en easynube.com

2. Backbone.js a través de un caso práctico
Backbone.js a travé s
de un caso práctico

3. Backbone.js a través de un caso práctico
Aplicación
Una tienda de libros
en la cual se pueden
examinar los
detalles de cada libro
y añadirlos a una
lista de deseos.
Dentro de la lista
será posible visitar
los libros con un click
así como eliminarlos
de la lista.

4. Backbone.js a través de un caso práctico
Aplicación
Una tienda de libros
en la cual se pueden
examinar los
detalles de cada libro
y añadirlos a una
lista de deseos.
Dentro de la lista
será posible visitar
los libros con un click
así como eliminarlos
de la lista.

5. Backbone.js a través de un caso práctico
Backbone.Model
“Models are the heart of any Los Modelos son el corazón de
JavaScript application, cualquier aplicación javascript;
containing the interactive data contienen la información con la
as well as a large part of the cual se interactúa y una gran
logic surrounding it: parte de la lógica que la rodea:
conversions, validations, conversiones, validaciones,
computed properties, and propiedades y control de
access control.” acceso.

6. Backbone.js a través de un caso práctico
Backbone.Model
En la práctica:
Título: Programming Python
Autor: Mark Lutz
Resumen: ...
Backbone.Model.extend({
título: 'Programming Python',
autor: 'Mark Lutz',
sumario: '…'
});

7. Backbone.js a través de un caso práctico
Backbone.Collection
Collections are ordered sets of Las colecciones son grupos
models. You can bind "change" ordenados de modelos. Puedes
events to be notified when ligar los eventos 'change' para
any model in the collection has notificar cuando se produzca un
been modified, listen for "add" cambio en un modelo, escuchar
and "remove" events, fetch eventos 'add' y 'remove',
the collection from the server recuperar la colección del
[ ...] servidor [...]

8. Backbone.js a través de un caso práctico
Backbone.Collection
En la práctica:
// Inicializar
Backbone.Collection.reset({
título: 'Programming Python',
autor: 'Mark Lutz',
sumario: '…'
});
// desde servidor
Backbone.Collection.fetch();
// ops
Backbone.Collection.get(id)
// eventos [add, remove, reset...]
Backbone.Collection.bind('add'
function() {});

9. Backbone.js a través de un caso práctico
Backbone.View
The general idea is to organize La idea principal es organizar tu
your interface into logical interfaz en vistas lógicas,
views, backed by models, each conectadas a sus respectivos
of which can be updated modelos, y que cada una de las
independently when the model cuáles pueda actualizarse
changes, without having to independientemente cuando su
redraw the page. modelo cambie, sin tener que
actualizar la página completa.

10. Backbone.js a través de un caso práctico
Backbone.View
Backbone.View.extend({ Backbone.View.extend({
el: $('#detail'), className: 'book',
Events: { render: function() {
“click #corazon”: “add_wishlist” $(this.el).html(
}, _.template(
add_wishlist: function() { this.model.toJSON()
Wishlist.add(this.model); ))
} };
}); });

11. Backbone.js a través de un caso práctico
Backbone.View
Una vista (view) de Backbone siempre tiene un elemento DOM,
se haya insertado en la página o no.
Backbone.view.el El elemento por defecto es
<div>
Backbone.view.el = $ Se puede definir un elemento
('#sidebar') existente
Backbone.view.tagName = Se puede elegir el tipo de elemento
“ span”
Backbone.view.className = Se puede definir un elemento con clase
“ book” (<div class=”book”>)
Backbone.view.id = Se puede definir un elemento con id
“ book” (<div id=”book”>)

12. Backbone.js a través de un caso práctico
Backbone.Router
Backbone.Router provides Backbone.Router ofrece
methods for routing client-side métodos para trabajar con rutas
pages, and connecting them to en el lado del cliente,
actions and events. conectándolas con acciones y
eventos.

13. Backbone.js a través de un caso práctico
Backbone.Router
Backbone.Router.extend({
routes: {
'': 'index',
':book': 'see_detail'
}
})
URL:
URL: / /#3
index() see_detail(book)
/* book = 3 */

14. Implementa esta aplicación a través del curso
Introducción a Backbone.js de easynube:
Consíguelo gratis en easynube.com