Con el pasar del tiempo en el mundo del desarrollo web, hemos visto la aparición de cientos de
Frameworks con el objetivo de agilizar el proceso de desarrollo.
Javascript no ha sido ajeno a esta corriente y hoy día podemos encontrar
Mootools,
Dojo,
Ext Core,
Prototype y
jQuery entre otros más.
A pesar de ser tan poderosas herramientas de desarrollo, ninguna posee algún tipo de lineamiento o estructura para crear nuestro código y con el pasar del tiempo nos vamos llenando de una cantidad de líneas y archivos en JS con un montón de selectores y funciones por todos lados (Código Spaghetti).
Hoy hablaremos sobre
Backbone.js, una librería Javascript creada por Jeremy Ashkenas, el mismo señor que ha creado
CoffeeScript . Esta librería nos da la posibilidad de implementar el patrón de desarrollo
MVC en Javascript además de otra gran cantidad beneficios.
Backbone.js posee cuatro clases principales:
- Model
- View
- Router
- Collection
[nota:fc148f99de]El siguiente tutorial es obtenido a partir de la lectura de otros tutoriales, la documentación de Backbone.js y las experiencias durante este proceso.[/nota:fc148f99de]
Manos a la obra
Primero vamos a crear una estructura HTML desde donde llamar nuestros archivos JS.
Código :
<!DOCTYPE html> <html lang="es"> <head> <meta charset='utf-8'> <title>Introduccion a Blackbone.js + Mustache.js</title> </head> <body> <!-- script --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/underscore-min.js"></script> <script type="text/javascript" src="js/backbone-min.js"></script> <script type="text/javascript" src="js/app.js"></script> </body> </html>
[nota:fc148f99de]
Blackbone.js requiere estrictamente la librería
Underscore.js para funcionar. Esta debe ir primero que blackbone.js[/nota:fc148f99de]
Model
En
Backbone.js los modelos son el corazón de nuestra aplicación, imaginémoslos como un conjunto de atributos y métodos de la forma
{key:value} donde los valores pueden ser funciones, objetos o arreglos.
Código :
(function(){ var DesarrolladorModel = Backbone.Model.extend(); })(); De esta forma hemos extendido todos los métodos y atributos de la clase
Backbone.Model en
DesarrolladorModel .
Agreguemos algunos atributos a nuestra clase
DesarrolladorModel:
Código :
(function(){ var DesarrolladorModel = Backbone.Model.extend({ initialize: function(){ console.info("Nuevo modelo de: DesarrolladorModel"); }, defaults:{ nombre: "Pepito Perez", edad: 24, lenguajes:[] } }); })();La función
initialize como su nombre lo indica se ejecuta automáticamente al crear una nueva instancia de nuestro modelo. Por el momento no veremos ningún cambio.
[nota:fc148f99de]El atributo "defaults" nos permite definir valores por defecto para nuestro modelo.[/nota:fc148f99de]
Ahora vamos a crear una instancia de nuestro modelo
DesarrolladorModel:
Código :
(function(){ // Crear modelo var DesarrolladorModel = Backbone.Model.extend({ initialize: function(){ console.info("Nuevo modelo de: DesarrolladorModel"); }, defaults:{ nombre: "Pepito Perez", edad: 24, lenguajes:[] } }); // Crear instancia var desarrollador = new DesarrolladorModel; })();Si nos fijamos en nuestra consola, vamos a ver el mensaje que definimos en la función del atributo
initialize.
Para ver que atributos posee nuestro nuevo modelo puedes hacer esto:
Código :
console.dir(desarrollador.attributes);
También podemos definir unos atributos durante la creación del modelo:
Código :
(function(){ // Crear modelo var DesarrolladorModel = Backbone.Model.extend({ initialize: function(){ console.info("Nuevo modelo de: DesarrolladorModel"); }, defaults:{ nombre: "Pepito Perez", edad: 24, lenguajes:[] } }); // Crear instancia var desarrollador = new DesarrolladorModel; // Crear otra instancia cambiando valores var desarrollador2 = new DesarrolladorModel({ nombre: "Mario marito", edad: 19, lenguajes: ["Javascript", "C"], editor: "Sublime Text 2" }); })();Podemos definir atributos aun después de creado el modelo a través del método
.set():
Código :
(function(){ // Crear modelo var DesarrolladorModel = Backbone.Model.extend({ initialize: function(){ console.info("Nuevo modelo de: DesarrolladorModel"); }, defaults:{ nombre: "Pepito Perez", edad: 24, lenguajes:[] } }); // Crear instancia var desarrollador = new DesarrolladorModel; // Crear otra instancia cambiando valores var desarrollador2 = new DesarrolladorModel({ nombre: "Mario marito", edad: 19, lenguajes: ["Javascript", "C"], editor: "Sublime Text 2" }); // Agregando atributos posteriormente desarrollador.set({editor: "Notepad++"}); })();Para obtener los atributos individuales de cada modelo podemos usar el método
.get():
Código :
desarrollador2.get("editor");Ahora vamos a crear un método para nuestro modelo que nos permita agregar lenguajes de programación a las instancias.
Código :
(function(){ // Crear modelo var DesarrolladorModel = Backbone.Model.extend({ initialize: function(){ console.info("Nuevo modelo de: DesarrolladorModel"); }, defaults:{ nombre: "Pepito Perez", edad: 24, lenguajes:[] }, addLenguaje: function(nuevoLenguaje){ //Obtenemos lenguajes del model var array_lenguajes = this.get('lenguajes'); //Adicionamos el nuevo lenguaje array_lenguajes.push(nuevoLenguaje); // Redefinimos el atributo lenguajes this.set({lenguajes:array_lenguajes}); } }); // Crear instancia var desarrollador = new DesarrolladorModel; // Crear otra instancia cambiando valores var desarrollador2 = new DesarrolladorModel({ nombre: "Mario marito", edad: 19, lenguajes: ["Javascript", "C"], editor: "Sublime Text 2" }); // Agregando atributos posteriormente desarrollador.set({editor: "Notepad++"}); // Agregar nuevo lenguaje desarrollador.addLenguaje("Python"); })();Bueno, hasta ahora nada del otro mundo, un montón de objetos con funciones dentro podrían decir ustedes, por eso seguimos con lo bueno de esta librería.
En
Backbone.js podemos asignar eventos de escucha, es decir, cuando un atributo del modelo cambie generamos un evento particular.
Cuando la propiedad
editor de nuestro modelo cambie, dispararemos un evento que genere un mensaje en consola:
[nota:fc148f99de]En este caso pondremos en escucha el evento desde el atributo "initialize", pero también puede ser llamado desde la instancia del modelo.[/nota:fc148f99de]
Código :
(function(){ // Crear modelo var DesarrolladorModel = Backbone.Model.extend({ initialize: function(){ console.info("Nuevo modelo de: DesarrolladorModel"); // Escuchando cambios para el modelo this.on("change:editor", function(){ console.log("Has modificado el editor"); }); }, defaults:{ nombre: "Pepito Perez", edad: 24, lenguajes:[] }, addLenguaje: function(nuevoLenguaje){ var array_lenguajes = this.get('lenguajes'); array_lenguajes.push(nuevoLenguaje); this.set({lenguajes:array_lenguajes}); } }); // Crear instancia var desarrollador = new DesarrolladorModel; // Crear otra instancia cambiando valores var desarrollador2 = new DesarrolladorModel({ nombre: "Mario marito", edad: 19, lenguajes: ["Javascript", "C"], editor: "Sublime Text 2" }); // Agregando atributos posteriormente desarrollador.set({editor: "Notepad++"}); // Agregar nuevo lenguaje desarrollador.addLenguaje("Python"); })();En la consola debemos estar visualizando el mensaje que definimos en el evento
change:editor.
Si deseáramos que el evento se iniciara al modificar cualquier atributo del modelo lo haríamos retirando el valor de
change para que escuche sobre cualquier atributo.
Código :
this.on("change", function(){ ... }); Como dije anteriormente también podemos llamar el evento desde la instancia de nuestro modelo.
Código :
desarrollador.on("change:editor", function(){ ... });Otra función de las muchas que poseen los modelos de
Backbone.js es
validate, la cual nos permite realizar validaciones previas a los cambios que se apliquen a las instancias de nuestros modelos.
Imagina que la función
validate es un policía que te chequea antes de entrar, Si cumples con los requisitos te dejará pasar y podrás realizar tus actividades. Pero si no los cumples no te dejará pasar y mandará un mensaje de error.
Realizaremos una validación en nuestro modelo que se encargará de verificar si el editor de uno de nuestros desarrolladores (instancias de modelo) es
Dreamweaver. Luego tendremos un evento en escucha de este error que nos genere un log en la consola con el mensaje de error.
Código :
(function(){ // Crear modelo var DesarrolladorModel = Backbone.Model.extend({ initialize: function(){ console.info("Nuevo modelo de: DesarrolladorModel"); this.on("change:editor", function(){ console.log("Has modificado el editor"); }); // Evento a la escuha del error this.on("error", function(model, error){ console.log(error); }); }, defaults:{ nombre: "Pepito Perez", edad: 24, lenguajes:[] }, addLenguaje: function(nuevoLenguaje){ var array_lenguajes = this.get('lenguajes'); array_lenguajes.push(nuevoLenguaje); this.set({lenguajes:array_lenguajes}); }, // Funcion de validacion validate: function(attributes){ if(attributes.editor == "Dreamweaver"){ return "Dreamweaver no es un editor permitido!"; } } }); // Crear instancia var desarrollador = new DesarrolladorModel; // Crear otra instancia cambiando valores var desarrollador2 = new DesarrolladorModel({ nombre: "Mario marito", edad: 19, lenguajes: ["Javascript", "C"], editor: "Sublime Text 2" }); // Agregando atributos posteriormente desarrollador.set({editor: "Notepad++"}); desarrollador.set({editor: "Dreamweaver"}); // Agregar nuevo lenguaje desarrollador.addLenguaje("Python"); })();Según lo anterior, en nuestra consola deberíamos tener dos mensajes. El primero con el mensaje de cambio de editor realizado correctamente y el segundo avisándonos que Dreamweaver no es un editor válido.
La función
validate es muy sencilla. Recibimos los atributos, los verificamos y retornamos un mensaje de error.
Código :
// Funcion de validacion validate: function(attributes){ if(attributes.editor == "Dreamweaver"){ return "Dreamweaver no es un editor permitido!"; } }El evento
on.("error") ubicado en el atributo de
initialize recibe el modelo donde se produjo el error y el mensaje de dicho error. Finalizando la actividad que disparó el evento sin que ésta se lleve a cabo.
Código :
// Evento a la escuha del error this.on("error", function(model, error){ console.log(error); });[nota:fc148f99de]Podemos obtener valores de los atributos aplicando el método ".get()" al modelo que recibimos en el evento error.[/nota:fc148f99de]
De esta forma terminamos el primer tutorial de
Blackbone.js y modelos. Los invito a que lean la
documentación que es muy completa y con ejemplos para todos los métodos.
En el segundo tutorial de
Blackbone.js trataremos las vistas. Espero que este haya sido de su agrado.
[nota:fc148f99de]Yo también soy novato en el mundo de
Blackbone.js, cualquier duda o sugerencia trataremos de resolverla entre todos.
@vlycser 
[/nota:fc148f99de]
