Luego de explicar cómo crear un proyecto con Backbone Boilerplate en este artículo, llega el momento de crear un módulo desde el cual pondremos los métodos y eventos relacionados con una funcionalidad de nuestro proyecto. Estamos creando un controlador en nuestra aplicación Backbone Boilerplate.
Mostraremos como utilizar la consola y nuestro comando bbb init y algunos trucos que nos ayudarán mucho para avanzar con nuestro proyecto.
Creando nuestro módulo de ejemplo
Para crear nuestro módulo usaremos la consola, aprovecharemos las facilidades que nos brinda Grunt y Grunt-bbb. Para ello nos iremos a nuestra carpeta del proyecto y pondremos este comando
bbb init:module
Al poner ese comando nos consultarán por el nombre del mismo, pondremos prueba:
Finalmente diremos que no queremos hacer más cambios y el módulo se creará en nuestra carpeta del proyecto.
Estructura general del módulo creado
Al crear nuestro módulo prueba, tres ficheros se crearán:
- app/styles/prueba.styl: El fichero donde pondremos los estilos de nuestro módulo.
- app/templates/prueba.html: Una vista por defecto para nuestro módulo. En proyectos de más envergadura se necesitarán más de uno.
- app/modules/prueba.js: El fichero principal donde controlaremos la funcionalidad e interacción con las vistas.
Integrar nuestro módulo en el proyecto
Para usar nuestro módulo en el proyecto lo tenemos que inicializar gracias a RequireJS. Como Backbone Boilerplate nos da prácticamente todo hecho, simplemente debemos editar nuestro fichero router.js e indicar que también utilizaremos nuestro módulo pruebas.
Las primera líneas de nuestro fichero enrutador deben ser estas.
define([
// Application.
"app", //Modules
"modules/prueba"
],
function(app, Prueba) {
Vale aclarar que estamos trabajando con una aplicación de ejemplo y que si se agregan más módulos se debería alterar lo que hemos agregado nosotros.
Conclusiones
Crear un módulo es muy fácil si usamos la consola de Grunt. Tenemos el 50% de nuestros conocimientos de Backbone Boilerplate. En nuestro próximo artículo crearemos una colección de pruebas utilizando la API que he creado para esta web para hacer un listado sencillo usando una vista de pruebas.