Durante el Manual de BackboneJS hemos ofrecido ya varios acercamientos a lo que son los modelos. El concepto y algunas de sus posibilidades lo aclaramos en el artículo sobre Qué son los modelos en BackboneJS. Además, en el primer artículo, donde empezamos con el código fuente, ya metimos mano a los modelos, aunque sin explicar mucho cómo se creaban estas estructuras.

Como ya hemos introducido de manera teórica los modelos, no vamos a entretenernos de nuevo explicando el concepto. Nos debe quedar claro, no obstante, que los modelos son los datos de nuestra aplicación. Ellos almacenan el "qué" (todo aquello que tengamos en la aplicación), dejando a parte el "cómo" (cómo deben ser mostrados los datos).

Creando una clase modelo con Backbone

Comencemos entonces viendo cómo se implementan los modelos. Teniendo en cuenta que todas las estructuras de BackboneJS aprovechan el paradigma de la Programación Orientada a Objetos (POO), entenderemos que los modelos se definen por medio de una clase y cada uno de los especímenes se crearán mediante objetos. Por ejemplo, las películas de un videoclub (en general) serían prototipadas mediante una clase y luego, cada una de las películas independientes, serían distintos objetos.

Así pues, comenzamos creando la clase del modelo, el tipo o definición, sobre el que podremos instanciar los objetos del modelo más tarde.

var Pelicula = Backbone.Model.extend();

Como has visto, las clases de los modelos en BackboneJS se definen haciendo un "extend" del modelo básico de Backbone y para ello usamos el método extend() que pertenece a Backbone.Model. Esto nos devuelve otra clase, que extiende a los modelos básicos, para implementar objetos con los datos de nuestra aplicación.

Es interesante comentar que en BackboneJS, el modelo de prototipos de Javascript se mantiene de unas clases a sus extendidas. Por ello, podríamos perfectamente extender Película para crear otras clases que hereden de ésta.

var PackPelicula = Pelicula.extend();

Creando los especímenes objetos modelo en BackboneJS

Una vez tenemos nuestra clase modelo, podemos crear nuevos objetos de esa clase, especímenes, instancias o datos de nuestra aplicación. Para ello instanciamos un objeto de esa clase que acabamos de crear.

var pelicula1 = new Pelicula();

Como en la mayoría de los lenguajes de programación orientados a objetos, utilizamos la palabra reservada "new" para crear una instancia de un objeto a partir de su clase. Así tenemos nuestra película, pelicula1, creada a partir de la clase Pelicula. Esta película ya es un especimen, es decir, un objeto concreto que hemos creado a partir de un prototipo. Ella podrá tener sus propios datos, como título, duración o cualquier otro dato que necesitemos que las películas alberguen.

Introducir y recuperar datos de un modelo: set() y get()

Este objeto película1 es como cualquier objeto Javascript. Yo si quisiera podría introducirle datos de la misma manera que hacemos con otros objetos en este lenguaje.

pelicula1.titulo = "Lo que el viento se llevó";

Luego podríamos hacer un console.log() para ver ese dato de mi objeto en la consola.

console.log(pelicula1.titulo);

Observaremos que en la consola aparece el título de esta película, sin embargo, esta manera de introducir datos no es del todo la adecuada en BackboneJS, porque, para que se produzcan los automatismos que Backbone nos ofrece con respecto a los modelos, necesita que nosotros hagamos las cosas de una manera un poco diferente.

Para definir los atributos o propiedades de los modelos utilizaremos el método set(), que recibe dos parámetros, el nombre del atributo que queremos cargar y el valor que queremos asignar.

pelicula1.set("titulo", "Alguien voló sobre el nido del cuco");

Así, hemos cargado de manera correcta el título de nuestra primera película, dejando a Backbone la responsabilidad de almacenarlo y hacer todo lo que necesite hacer sobre nuestro modelo.

La manera de recuperar un dato previamente almacenado con set() en un modelo es usar el método get(). A él le indicamos el nombre de la propiedad a la que queremos acceder.

pelicula1.get("titulo");

Eso nos devolverá el dato que habíamos almacenado anteriormente por medio de set(). Si observamos con detalle, será independiente del que cargamos simplemente asignando un valor a pelicula1.titulo. Esto lo veremos con un ejemplo detallado más adelante, pero si tomas todo el código de este artículo y lo pones en ejecución lo podrás comprobar por ti mismo.

// creo la clase Pelicula
var Pelicula = Backbone.Model.extend();
// creo un objeto de la clase Pelicula
var pelicula1 = new Pelicula();

// asigno una propiedad de manera habitual con Javascript
pelicula1.titulo = "Lo que el viento se llevó";
// asigno una propiedad ahora de la manera útil para aprovechar BackboneJS
pelicula1.set("titulo", "Alguien voló sobre el nido del cuco");

//muestro ambos datos y veo que son independientes
console.log(pelicula1.titulo);
console.log(pelicula1.get("titulo"));

Ventajas de usar set() y get()

Quizá quieras saber más sobre las ventajas de usar el método set() en vez de usar las propiedades de los objetos de Javascript nativo. Lo veremos en seguida, pero os adelantamos que al hacer un set() estaremos consiguiendo que BackboneJS ponga todos esos mecanismos que nos facilitarán la vida.

Entre otras cosas, provocando que se generen eventos específicos en el modelo, a los que podremos asociar funciones manejadoras para hacer cosas. También podremos detectar esos eventos desde cualquier otro objeto de la aplicación que esté escuchando.

Otra de las ventajas es que tendremos acceso a funciones de validación creadas en los modelos, o a serialización en JSON. Por ejemplo, mira este código:

pelicula1.toJSON();

Esto nos devolverá una serialización de los datos almacenados en el modelo, en notación JSON, que podremos usar para aquello que necesitemos, como almacenar los datos en LocalStorage, o enviarlos a un servidor por AJAX. Para el caso de la película creada anteriormente tendremos este JSON generado:

{titulo: "Alguien voló sobre el nido del cuco"}

Esperamos que lo visto hasta ahora te haya dado una primera idea, no solo sobre lo que te proporcionan los modelos, sino cómo se crean en Backbone.JS. Aclaramos que hemos sido muy escuetos en cuanto a código y que hay muchas otras utilidades y mecanismos que aún tenemos que ver. En próximos artículos continuaremos explorando estas posibilidades.