Siguiendo con la serie de artículos relacionados con el framework de Backbone, Backbone Boilerplate, hoy aprenderemos cómo utilizar nuestra vistas en nuestro proyecto. Es importante aclarar que estamos trabajando bajo Backbone Boilerplate, pero podemos aplicarlo a cualquier otro proyecto que no lo use.
Dejaré algunos tips para darnos cuenta lo útil que es este plugin de Backbone y lo limpio que puede dejar nuestro código fuente, además de permitirnos modularizar aun más nuestra aplicación.
Antes de instalarlo, veamos los beneficios que obtendremos si decidimos usarlo
Backbone Layoutmanager nos brinda una lógica y una potencia a la hora de administrar nuestras vistas que Backbone por si solo no podía hacer.
Cuando buscamos en google las maneras de mostrar una vista usando Backbone, siempre nos encontramos con soluciones del siguiente estilo:
var View= Backbone.View.extend({
render: function(data) {
var markup = _.template("<%= name %>")(data);
this.$el.html(markup);
return this;
}
});Para templates pequeños funciona muy bien, pero estoy seguro que muchos de nosotros trabajan con layouts mucho más grandes y complejos.
Entonces nos encontramos con la opción de poner templates en nuestro código fuente, como el siguiente ejemplo (extraído de la web oficial de Backbone Layoutmanager):
<script id="productDescription" type="text/template">
<h4><%= name %></h4>
<em>Price: <%= price %><hr>
<%= description %>
<hr>
<h5>Details:</h5>
<table>
<% details.each(function(detail) { %>
<tr>
<td><%= detail.name %></td>
<td><%= detail.value %></td>
</tr>
<% }); %>
</table>
</script>
Todo parece hermoso hasta ahora. ¿Pero qué pasa si tenemos muchos templates en nuestra aplicación? Nuestro index quedaría lleno de scripts que, sinceramente, no debería poder ver nadie tan fácil. Aparte de que nuestro fichero aumentaría su peso en kb, por lo que si decidimos usar esto en una app móvil estaremos ante un más que posible problema de rendimiento.
Backbone Layoutmanager soluciona estos problemas y al extender de Backbone, nos brinda toda su potencia para modularizar nuestros templates y tener un código bien limpio.
Instalación y configuración básica
Cómo Backbone Layoutmanager depende de Backbone, entonces debemos incluir los siguientes ficheros en nuestra aplicación.
<!-- Dependencias. -->
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script><!-- Backbone Layoutmanager. -->
<script src="backbone.layoutmanager.js"></script>
Pueden descargarse LayoutManager desde el siguiente enlace: Descarga Backbone Layoutmanager desde Github.
Ahora debemos poner los parámetros de configuración de Backbone. Básicamente lo que haremos es configurar Layoutmanager para que guarde en caché las llamadas a los templates. Esto nos evitará hacer muchas llamadas Get a nuestra app.
Backbone.Layout.configure({
prefix: "app/webroot/templates/", fetch: function(path) {
var JST = window.JST || {};
if (JST[path]) {
return JST[path];
}
var done = this.async();
$.get(path, function(contents) {
done(_.template(contents));
}, "text");
}
});
Lo que necesitamos configurar aca es el parámetro prefix, ya que será la ruta a nuestros templates desde donde haremos un fetch de nuestros ficheros. Esto es muy bueno ya que nos permite tener en una sola carpeta todos nuestros templates, logrando un código más limpio.
Ejemplo de Layout
Crearemos un Layout de ejemplo, y explicaremos cada uno de las funcionalidades que tenemos.
var exampleTemplate = Backbone.Layout.extend({
el: 'body',
template: 'template-example.html',
serialize: data,
initialize: function(){
console.log('initialize');
},
beforeRender: function(){
console.log('afterRender');
},
afterRender: function(){
console.log('afterRender');
},
events:{
'click p': 'showAlert',
},
showAlert: function(){
alert('hello');
}
});Mucho de lo que vemos aca nos suena familiar, puesto que el Layout, al extender de Backbone, nos proveé funcionalidades propias de vistas, que nos servirán mucho para modularizar aun mejor nuestro Template.
Template: Es el fichero html que tendrá nuestro template. En nuestro ejemplo se llama template-example.html, pero si recordamos, más arriba pusimos un prefix en la configuración de Layoutmanager, por lo que nuestra aplicación buscará el fichero en la siguiente ruta: app/webroot/templates/template-example.html.
Serialize: Aca podremos pasar datos en formato json a nuestro Template, esto lo veremos en mejor detalle en el ejemplo de abajo:
var json = {'name': 'mario'}
var templateExample = new exampleTemplate.render();En nuestro fichero template-example.html tenemos lo siguiente:
<p><%= name %></p>El template reemplazará cada valor por el que le pasemos por json, la verdad muy intuitivo y fácil de usar.
El evento que he puesto es de ejemplo, solo para que podamos comprobar que cuando hagamos click en el nombre se mostrará un alert. Esto no es una novedad de Layoutmanager, pero si que es importante mencionarlo ya que nos permite modularizar nuestros eventos en una sola variable.
Conclusión
Backbone Layoutmanager, a mi opinión, es indispensable para nuestros proyectos Webs basados en Backbone, logramos modularidad, código limpio y mucho más con tan solo un fichero de 6 kb.
Lo recomiendo altamente, y no olviden de ver los anteriores dos artículos sobre Backbone Boilerplate.
Pueden visitar también la web oficial: Web oficial de Backbone Layoutmanager