BACKBONE.

JS
Requisitos
Backbone.js tiene una serie de requisitos para su funcionamiento:
Backbone.js (http://backbonejs.org/)
Para la gestin de las vistas necesita una librera para la manipulacin del
DOM como jQuery o Zepto.
J query.js (enlace de descarga: http://jquery.com/)
Zepto.js (enlace de descarga: http://zeptojs.com/#download)
Para el procesamiento de JSON necesita la librera JSON2
Enlace de descarga http://www.json.org/
Y como funciones auxiliares, necesita la librera Underscore, tambin
desarrollada por DocumentCloud
Underscore.js (enlace de descarga: http://underscorejs.org/ )
Introduccin. Backbone.js
Backbone.js es un framework J avaScript MVC de DocumentCloud creada
por J eremy Ashkenas. Entre sus principales caractersticas est la facilidad
que ofrece para acabar con el spaghetti-code en javascript.
El cdigo spaghetti es un
trmino para los programas
de computacin que tienen
una estructura de control de
flujo compleja e
incomprensible.
Su nombre deriva del hecho
que este tipo de cdigo
parece asemejarse a un
plato de espaguetis, es
decir un montn de hilos
intrincadosy anudados.
Introduccin. Backbone.js
Backbone.js ofrece una serie de objetos para poder organizar mejor el
cdigo de la aplicacin:
Model, que contiene la informacin de un objeto de datos (por ejemplo
un registro de la base de datos)
Collection, que contiene un conjunto de modelos
View, que se encarga de gestionar los objetos del DOM y son la parte
visible de la aplicacin
Router, que se encarga de las transiciones entre las vistas (lo que venan a
ser los cambios de pgina de antao)
Introduccin. Backbone.js
El Modelo Vista Controlador (MVC) es un patrn de arquitectura de software
que separa los datos y la lgica de negocio de una aplicacin de la interfaz
de usuario y el mdulo encargado de gestionar los eventos y las
comunicaciones
MVC BACKBONE
MODEL MODEL/COLLECTION
VIEW TEMPLATE
CONTROLLER VIEW/ROUTER
Porqu usar backbone?
Nos ofrece la posibilidad de estructurar nuestro cdigo siguiendo el patrn
MVC (Modelo, Vista, Controlador). Como su nombre indica, el objetivo de
esta librera es formar parte de la columna vertebral de nuestra aplicacin
ofrecindonos nicamente la funcionalidad necesaria para estructurarla
correctamente.
Esa es una de sus grandes virtudes pues se centra nicamente en
proporcionar conceptos bsicos como modelos, eventos, colecciones, vistas
y routing.
Dnde usar backbone?
Es ideal para front endspesados y con mucho manejo de datos.
Por ejemplo, una aplicacin con 50 eventos diferentes, con un modelo de
varios tipos datos con objetos con 6 mtodos de lgica de negocio cada
uno, con interaccin entre objetos y elementos del DOM, etc.
Como podran ser la interfaz de GMail, Twitter, Facebook, y otras aplicaciones
con un front-end cargado y complejo. Backbone hace ms fcil navegar y
entender el cdigo.
en lugar de manejar un J SON enorme, toquetear el DOM manualmente y
realizar muchas llamadas ajax, se trata de poder llegar a escribir:
book.save({title: Prueba});
y que las interfaces de usuario que hacen referencia al libro se
actualicen automticamente y los cambios se guarden en el servidor.
MODELO
Con Backbone.js, los datos se representan como modelos que
pueden ser creados, validados, destruidos o almacenados en el
servidor. Un modelo nos permite crear una estructura de
informacin que define una entidad.
Estructura de modelo
varPersona = Backbone.Model.extend({
defaults: {
nombre: 'Nombre por defecto',
edad: 31
},
initialize: function() {
...
},
});
Creacin de la instancia del modelo
Para crear una instancia de este modelo, haremos lo siguiente:
varpers= new Persona({nombre: "Fulano de Tal", edad: 23 });
Leer y escribir atributos.
Leer y escribir los atributos se realiza por medio de los mtodos get y set:
varnom= pers.get(nombre);
pers.set({edad: 32 });
Si queremos guardar el modelo en la base de datos en el estado en el que se
encuentre, utilizaremos el mtodo save, que enviar una llamada de tipo
POST al servidor, a la direccin que se encarga de gestionar dicho modelo, o
de tipo PUT, si el modelo ya existe.
pers.save();
COLECCIONES
Un conjunto de instancias de modelos, es en Backbone.js,
una coleccin. Buscando un smil con bases de datos,
podramos decir que una coleccin es el resultado de
una consulta SQL que devuelve un conjunto de registros.
Creacin de una coleccin
PersonasColletion= Backbone.Collection.extend({
model: Persona,
});
Ejemplo de coleccin
Incluir un mtodo a la coleccin que devuelva aquellas personas menores de
18 aos:
PersonasColletion= Backbone.Collection.extend({
model: Persona,
menoresEdad: funcion() {
return this.filter(function(pers) {
returnpers.get('edad') < 18;
});
}
});
Ejemplo de coleccin
Las colecciones soportan las tpicas operaciones de creacin, lectura,
actualizacin o borrado de elementos:
// crear (add)
varpersonas = new PersonasCollection;
personas.add([
{name: 'Fulano de Tal', edad: 18 },
{name: 'Mengano de Cual', edad: 26 }
]);
Ejemplo de coleccin
Las colecciones soportan las tpicas operaciones de creacin, lectura,
actualizacin o borrado de elementos:
// leer
varfernando = editores.get(1);
// actuallizar
editores.at(0).set({posts: ['/un-post/ok']})
// borrar
editores.remove(ariel);
VISTAS
Las vistas en Backbone.js pueden resultar un poco confusas, ya
que se asemejan ms a un controlador que a una vista.
Las vistas son clases que se encargan de representar los
modelos dentro de nuestra aplicacin y de escuchar los
eventos lanzados por los modelos y las colecciones.
Estructura de una vista
varPersonaView= Backbone.View.extend({
tagName: "div",
className: "persona",
initialize: function() {this.model.on('change', this.render, this); },
render: function() {this.el.innerHTML= this.model.get('nombre'); },
events: {'click .delete': 'deleteAction' },
deleteAction: function(){this.model.destroy(); returnfalse; }});
varpersView= new PersonaView({
model: persona, id: 'persona_' + persona.id });
FIN