Introducción a Backbone.js : Modelos

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

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.

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>

Blackbone.js requiere estrictamente la librería Underscore.js para funcionar. Esta debe ir primero que blackbone.js

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.

El atributo "defaults" nos permite definir valores por defecto para nuestro modelo.

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:

En este caso pondremos en escucha el evento desde el atributo "initialize", pero también puede ser llamado desde la instancia del modelo.

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);
         });

Podemos obtener valores de los atributos aplicando el método ".get()" al modelo que recibimos en el evento error.

Source / Demo

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.

Yo también soy novato en el mundo de Blackbone.js, cualquier duda o sugerencia trataremos de resolverla entre todos. @vlycser

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Introducción a Backbone.js : Modelos

Manos a la obra

Model

Source / Demo

Publica tu comentario

o puedes...