Ahora vamos a tratar de introducir las vistas y explicar cuáles son las ventajas que nos ofrecen en BackboneJS. Este es un artículo del Manual de BackboneJS, que entenderás si te has leído los capítulos anteriores.

Conociendo las vistas podremos entender finalmente cómo todos los "engranajes" que nos ofrece BackboneJS para el desarrollo web funcionan, ligados entre sí por el sistema de eventos, para realizar aplicaciones complejas con mayor facilidad.

Vistas en general

Las vistas contienen la parte del código que sirve para presentar la información. Como estamos desarrollando web, las vistas contendrán el código HTML que tenemos que generar para presentar los datos en la página.

Este es otro de los elementos clave de BackboneJS y de cualquier sistema que trabaje en base a patrones de diseño de software MVC. De hecho, en nuestras aplicaciones web, con lo que más vamos a trabajar es con los modelos y las vistas. Los modelos ya sabemos que sirven para almacenar los datos y las vistas que sirven para mostrarlos en código HTML.

Si lo queremos ver así, las vistas son una abstracción de cómo vamos a ver los datos en nuestra página. Pensando en un sitio web, podríamos tener una vista general que nos guarda la "plantilla" sobre el contenido que va a tener toda la página. Pero si lo deseamos hacer un poco más modular, podríamos tener una vista general y otra serie de vistas hijas, que contienen cada uno de los elementos de la página, por ejemplo, una para el buscador, otra para el recuadro de últimos artículos publicados, otra para el de login de usuarios, etc.

Potencia de las vistas en BackboneJS

El sistema de vistas, además, se enlaza con los modelos, de modo que podemos mostrar los datos de esos modelos en las vistas, pero además hay determinadas vistas que las podremos enlazar con colecciones en vez de modelos para mostrar un conjunto de datos. Por ejemplo, en los comentarios de artículos podríamos tener enlazada una colección con todos los modelos de los comentarios que deben aparecer. Es decir, en nuestra vista de comentarios tendríamos asociada una colección donde cada comentario sería cada uno de los modelos de la colección.

Siguiendo ese ejemplo de los comentarios, cuando un usuario hace un comentario en la página y pulsa en "submit", desde el punto de vista de BackboneJS, estaríamos haciendo un "save", que mandaría ese comentario al servidor. Además, podríamos estar haciendo un "fetch" en la colección que actualizaría los comentarios con los datos que haya en el servidor actualmente. Estos cambios en los modelos y las colecciones estarían lanzando eventos, los cuales a su vez estarían siendo escuchados por las vistas para actualizar su contenido.

En fin, si una vista detecta que ha habido cambios en los modelos o colecciones que tiene asociados podría actualizarse automáticamente, mostrando el contenido nuevo, donde puede que ya no haya los mismos elementos, pues quizás se agregaron nuevos o se eliminaron algunos antiguos. Todo esto nos permite tener vistas que son perfectamente dinámicas, sin tener que volvernos locos actualizando su contenido manualmente desde mil sitios en el código de la aplicación.

No es un motor de plantillas

Para no llevarnos a engaño, tal como están implementadas las vistas en BackboneJS, cabe señalar que no son lo que podríamos entender como un motor de plantillas. Es decir, con las vistas en Backbone no vamos a determinar el HTML o el CSS de nuestra página, eso lo podemos dejar en manos de nuestro motor de plantillas preferido, pero no en Backbone.JS.

Entonces ¿qué es exactamente lo que está implementado en las vistas de Backbone.js? Pues simplemente son unas clases que extiende el sistema de vistas genérico de Backbone y sobre el que indicamos los eventos que van a escuchar o producir, los modelos o colecciones con los que están enlazados, etc. Es decir, lo que básicamente nos sirve para implementar todo el sistema de sincronización con los modelos y propagación de eventos.

Aunque no sea un sistema de plantillas, las vistas siguen siendo las responsables de renderizar HTML en la página. Para ello existirá un método que se llama render() que sí tiene que ver con la creación de HTML y manipulación del DOM, al que se llama cada vez que tiene que refrescarse la vista. En ese método deberíamos producir el HTML de nuestra vista por los medios que nosotros deseemos, aunque lo lógico es usar algún template engine que nos guste y nos facilite la labor.

Más adelante nos dedicaremos a ofrecer ejemplos concretos con código y obtendremos más información de las vistas. De momento, lo importante es que hayamos podido aclarar conceptos y entender las posibilidades que nos ofrece el framework BackboneJS.