Curso Backbone.js

backbone-logo

Backbone.js es una librería JavaScript que nos permite crear aplicaciones/sitios web que requieren de una basta interacción con el cliente, agregando la lógica del patrón MV* al ofrecer una estructura basada en modelos con la unión clave-valor , colecciones con una API de funciones enumerables, vistas asociadas con el control de eventos personalizados y mediante a su sistema de enrutamiento sincroniza las modelos/vistas/colecciones a la API JSON de tu aplicación/sitio.

En el taller se desarrollara una aplicación sencilla en donde se explicara el uso de Backbone.js, sus conceptos básicos, aspectos de configuración y de como combinar esta herramienta con algún otro framework backend.

Presenter Notes

¿Como funciona Backbone.js?

La siguiente figura ilustra como funciona una típica aplicación con Backbone.js:

Funcionamiento aplicación con Backbone.js

Presenter Notes

1 Modelos

Presenter Notes

1.0 - Modelos de Backbone

Los modelos representan los datos de la aplicación y la lógica alrededor de estos datos.

Creamos un archivo llamado platica en /js/models/platica.js, con el siguiente contenido:

 1 var Platica = Backbone.Model.extend({
 2     initialize: function () {
 3         //Aquí agregamos los callbacks del modelo
 4         this.on('change', function (){
 5             console.log(this);
 6         });
 7     },
 8     urlRoot : '/platicas'
 9     defaults: {
10         nombre: '',
11         ponente: '',
12         hora   : 'Por Confirmar'
13     }
14 });

Presenter Notes

1.1 Usando el Modelo

Creando un modelo

1 var platica = new Platica({
2     nombre  : 'Taller de backbone',
3     ponente : 'Fitorec'
4 });
5 
6 platica.toJSON();

Leyendo datos

1 var platica1 = new Platica({
2     id  : 1
3 });
4 
5 // GET: /platicas/1
6 platica1.fetch();
7 platica1.toJSON();

Presenter Notes

1.2 Persistencia de datos

Agregando & actualizando datos

 1 var nuevaPlatica = new Platica({
 2     nombre  : 'Platica sobre nodejs',
 3     ponente : 'Alguien'
 4 });
 5 
 6 // POST: /platicas/
 7 //Si tuviera definido el 'id'
 8 // PUT: /platicas/id
 9 nuevaPlatica.save();
10 nuevaPlatica.toJSON();

Borrando un registro.

1 // DELETE: /platicas/1
2 platica1.destroy();

Presenter Notes

1.3 Validación y otros tips:

Agregando validación

 1 var Platica = Backbone.Model.extend({
 2     validate: function (atributos) {
 3         if(!atributos.nombre) {
 4             return "el campo nombre es obligatorio";
 5         }
 6     }
 7 });
 8 
 9 var platica = new Platica();
10 platica.save();

Presenter Notes

2 Vistas

Presenter Notes

2.0 Vistas de Backbone.js

Una vista es la parte que contiene la lógica del renderizado, apoyándose de los templates para mostrar el contenido html en la aplicación.

1 var Platica1Vista = Backbone.View.extend();

El elemento this.el

En Backbone toda vista contiene el atributo el, el cual es una instancia en el DOM.

Veamos esto:

1 var platica1V = new Platica1Vista();
2 console.log( platica1V.el );
3 /* Resultado
4  *   <div></div>
5  */

Presenter Notes

2.1 - Más sobre el

Personalizando this.el

1 var Platica1Vista = Backbone.View.extend({
2     tagName   : 'section',
3     className : 'platica',
4     id        : 'platica-1' 
5 });
6 
7 // Valor el por defecto de Platica1Vista: 
8 // <section class='platica' id='platica1'>
9 // </section>

this.el puede definirse como un selector que apunte a un elemento o conjunto de elementos existentes en el DOM, por ejemplo:

1 var Platica1Vista = Backbone.View.extend({
2     el   : '#platica-1' 
3 });

this.el y jQuery

1 Se cumple que:
2 this.$el = $(this.el);

Presenter Notes

2.2 Render y plantillas

Método Render:

1 var Platica1Vista = Backbone.View.extend({
2     initialize : function() {
3         this.render();
4     },
5     render   : function() {
6         this.$el.html('metodo render');
7     } 
8 });

Presenter Notes

2.3 Vistas & eventos

Manejo de eventos

Los eventos son definidos en el objeto events, la sintaxis es la siguiente:

1 events : { 
2     '<evento1> <selector1>' : '<callback1>',
3     '<evento2> <selector2>' : '<callback2>',
4     ...
5     '<eventon> <selectorn>' : '<callbackn>',
6 }

Veamos un ejemplo:

1 var Platica1Vista = Backbone.View.extend({
2     events: {
3         'click .efecto' : 'efectoCallBack'
4     },
5     efectoCallBack : function() {
6         this.$el.fadeOut().fadeIn();
7     }
8 });

Presenter Notes

3 Colecciones

Presenter Notes

3.0 Colecciones de Backbone

Las colecciones son un conjunto ordenado de modelos.

1 var PlaticasCollection = Backbone.Collection.extend({
2     model : Libro
3 });
4 
5 var platicas = new PlaticasCollection();

Presenter Notes

3.1 Agregando & Quitando Modelos

Agregando Modelos a la colección

 1 var a = new Platica({nombre: 'taller de Backbone'}),
 2     b = new Platica({nombre: 'otro taller'}),
 3     c = new Platica({nombre: 'alguna otra platica'});
 4 
 5 // Creamos la colección enviandole
 6 // un conjunto de modelos(2)
 7 var platicas = new PlaticasCollection([a,b]);
 8 console.log(platicas.toJSON());
 9 
10 //Agregando la platica c
11 platicas.add(c);
12 console.log(platicas.toJSON());

Quitando Modelos a la colección

1 //Borrando la platica a
2 platicas.remove(a);
3 console.log(platicas.toJSON());
4 
5 //Borrando un conjunto de objetos
6 platicas.remove([b,c]);
7 console.log(platicas.toJSON());

Presenter Notes

3.2 Vaciando la colección

Reseteando colección

1 //Cambiando el contenido de la coleccion
2 platicas.reset([
3     {nombre: 'taller backbone'}
4 ]);
5 
6 //si no le pasamos nada, es una forma de vaciar
7 // una coleccion
8 platicas.reset();

Presenter Notes

3.3 Persistencia de datos del la colección

Obteniendo objetos de la colección

Esto se realiza mediante la función get de la colección, esta funcion puede recibir cualquiera de estos valores:

  • id : Identificador del Modelo (idAtribute)
  • id atribute: este por defecto es id

  • cid : identificador interno en Backbone.

    !javascript var Platica1 = platicas.get(1);

Presenter Notes

3.4 Eventos & Colecciones

Como las colecciones representan conjuntos de objetos podemos escuchar los eventos de agregar,quitar o al modificar modelos en dicho conjunto.

on add

 1 var platicas = new PlaticasCollection();
 2 // Le agregamos el evento al modificar
 3 platicas.on('add', function(){
 4     console.log('Se agrego una nueva platica');
 5 });
 6 
 7 //agregamos platicas a la colección(disparando el evento)
 8 platicas.add([
 9     {nombre: 'platica 1'},
10     {nombre: 'platica 2'}
11 ]);

onChange

1 // Le agregamos el evento al modificar
2 platicas.on('change', function(){
3     console.log('Se agrego una nueva platica');
4 });

Presenter Notes

4 Plantillas

Presenter Notes

4.0 Plantillas y Backbone

Nos ayudan a definir código genérico HTML, que serán renderizado con el contenido de nuestros modelos.

Utilizando las plantillas de underscore

1 var planticaPlantilla = _.template('#platicaTemplate');
2 //
3 $('boddy').append(planticaPlantilla);

template en el html

1 <script type='text/template' id='platicaTemplate'>
2     <h2><%= nombre %></h2>
3     <p><%= ponente %></p>
4     <small><%= hora %></small>
5 </script>

Presenter Notes

4.1 - templates y vistas

 1 var Platica1Vista = Backbone.View.extend({
 2     el        : '#platicas'
 3     initialize: function () {
 4         app.platicas.on('add',
 5             this.mostrarPlatica
 6         );
 7         app.platicas.fetch();
 8     },
 9     mostrarPlatica: function(platicaModel) {
10         var vista = new mostrarPlaticaView({model:platicaModel});
11         $('.platicas').append(vista.render().$el);
12     }
13 });
14 //Definiendo mostrarPlaticaView
15 var mostrarPlaticaView = Backbone.View.extend({
16     template : _.template( $('#platicas').html()),
17     render : function (){
18         this.$el.html (this.template(this.model.toJSON()));
19         return this;
20     }
21 });

Presenter Notes

4.2 Otros sistemas de plantillas

  • Mustache
  • Handlebars
  • jQuery templates

Presenter Notes

5 Rutas

5.0 - Rutas ejemplo completo 1

 1 var myRouter = Backbone.Router.extend({
 2     routes : {
 3         ''      : 'mostrarEnlace1',
 4         enlace1 : 'mostrarEnlace1',
 5         ancle2  : 'mostrarEnlace2',
 6     },
 7     mostrarEnlace1: function () {
 8         new VistaDisparada1();
 9     },
10     mostrarEnlace2: function () {
11         new VistaDisparada2();
12     }
13 });
14 
15 var myrouter = new myRouter();
16 Backbone.history.start();

Presenter Notes