USO DE TEMPLATES HANDLEBARS CON ZEPTO. MITAD II. RUTAS, “HELPERS” Y “PARTIALS”

< script src=”my own” title=”uso de templates handlebars con zepto”>

Bigotes con estilo!!!

Bigotes con estilo!!!

¿Un post con bigotes al comienzo? Suena interesante… :mrgreen:

En el post anterior, hablé de algunas de las características más comunes de esta librería para templates, a continuación la segunda parte donde aplico otras características más avanzadas.

CAMBIOS APLICADOS

He hecho varios cambios en la estructura inicial del proyecto respecto al post anterior para ilustrar las funcionalidades que vamos a discutir aquí. Para empezar, separé el código fuente en dos archivos: index.html que será la base de nuestra app, mientras que template-app.js contiene el código fuente de la generación de la data y nuevas funcionalidades como ya podrán detallar en el código fuente más adelante:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="entireframework.min.css">
	<title>Ejemplo Handlebars</title>
</head>
<body>

<h1>Lista de usuarios con Handlebars</h1>


<div class="container">

<div class="template"></div>

	</div>


	<!-- Templates e instancia de Javascript -->
	<script src="handlebars-v3.0.0.js"></script>
	<script id="userlist" type="text/x-handlebars-template">
		{{#display userList cards=4}}
			{{> card}}
		{{/display}}
	</script>
	<script src="zepto.js"></script>
	<script src="faker.min.js"></script>
	<script src="template-app.js"></script>
</body>
</html>

Y el otro archivo:

$(function(){

	Handlebars.registerPartial("fullName", "{{lastName}}, {{firstName}}");

	Handlebars.registerPartial("card", "
<div style=\"border: 1px solid {{#if enabled}}green{{else}}red{{/if}}; margin: 10px;\">
<h2>{{> fullName}}</h2>

<strong>{{address}}</strong>

<em>Teléfono: {{phone}}</em>
<hr>

{{#with company}}
<blockquote style=\"font-style: italic;\"><strong>{{job}}</strong>
{{motto}}
</blockquote>

{{/with}}</div>

");

	Handlebars.registerHelper("display", function(list, options) {
		var i = 0, j = 0, arr = [], sub = [],
				len = options.hash['cards'], out = "";
		while (i < list.length) {
			while(j < len) {
				sub.push(list[i]);
				j++; i++;
			};
			arr.push(sub); j = 0; sub = [];
		};
		for (i = 0; i < arr.length; i++) {
			out += "
<div class=\"row\">";
			for (j = 0; j < len; j++) {
				out += "
<div class=\"col c"+arr.length+"\">" + options.fn(arr[i][j]) + "</div>

";
			};
			out += "</div>

";
		};
		return out;
	});

	//español
	faker.locale = 'es';

	var listaUsuarios = []; //arreglo de usuarios;

	for (var i = 0; i < 12; i++) {
		//crea un único usuario cada vez que se declara la variable
		var usuario = {
			firstName: faker.name.firstName(),
			lastName: faker.name.lastName(),
			address: faker.address.streetAddress(),
			phone: faker.phone.phoneNumber(),
			company: {
				job: faker.company.companyName(),
				motto: faker.company.catchPhrase()
			},
			enabled: faker.random.number() ? true : false
		};
		//Se agrega al arreglo de usuarios
		listaUsuarios.push(usuario);
	};

	//Se encapsula la lista
	var lista = { userList: listaUsuarios };

	//se convierte de semántica Handlebars a HTML plano
	var source = $('#userlist').html(),

	//se precompila el template HTML para insertar datos
	template = Handlebars.compile(source);

	//se insertan datos y se añaden al cuerpo HTML
	$('.template').append(template(lista));
});

Incluí el framework min.css para darle formato a la fuente de la página y tener un sistema de grillas sencillo que haga el trabajo, me gustó bastante ese framework 😀 .

RUTAS A OBJETOS ANIDADOS

Handlebars cuenta con la capacidad de incluír objetos anidados complejos dentro del contexto de un template específico o de varios anidados. Pueden apreciar en el Javascript el uso del helper {{#with}}, el cual indica que un contexto de un atributo determinado, contiene un objeto anidado que puede ser aplicado para [casi] cualquier nivel de recursión, evitando colisiones entre los distintos espacios de nombres. ^^’

REGISTRO DE “HELPERS”

Los helpers son las funciones que posee Handlebars para realizar iteraciones, anidar bloques y ejecutar condicionales, comienzan con un símbolo (“#“). Sumado a las que Handlebars posee, se pueden registrar cualquier cantidad de helpers adicionales, que no son más que una lógica Javascript de presentación y adecuación de un contexto dentro de un template. Para registrar helpers, se usa la función Handlebars.registerHelper(), que acepta dos parámetros: un array con el o los objetos a ser mostrados y un objeto hash con algunas opciones de configuración sobre el contexto. Puedes visitar la documentación para saber más sobre los helpers. ^^’

Algo realmente agradable de los helpers es que son totalmente parametrizables. En el template del archivo index.html, pueden ver que aparte de iterar sobre la lista encapsulada, permite mediante el parametro cards, modificar el número de cuadros que aparecen en la grilla, las posibilidades son infinitas con semejante poder.

REGISTRO DE “PARTIALS” TEMPLATES

Un “partial template” es un template reusable en múltiples sitios de nuestra app, que incluso, puede tener cierta lógica de presentación, combinando o formateando uno o más atributos del contexto del template. Pueden ver en la línea 3 del archivo template-app.js un ejemplo de esto, combinando ambos atributos y usándolos en otro template o partial template según se necesite. Los partial templates tienen la ventaja de que son anidables. Comienzan con un sígno mayor que (“>“). En la línea 5 del Javascript, vemos que el partial template registrado arriba se usa debajo sin ningúna declaración adicional, y a su vez, el partial template registrado debajo se usa en index.html.

Y AHORA ¿QUÉ TENEMOS?

Para que se hagan una idea de lo que hicimos, vamos a ver algunas capturas configurando el parámetro cards con 2, 3 y 4 elementos por fila:

Usando cards = 2 en index.html

Usando cards = 2 en index.html

handlebars-3-por-fila

Usando cards = 3 en index.html

handlebars-4-por-fila

Usando cards = 4 en index.html

Viendo un ejemplo sencillo como este, no me queda duda de que Handlebars tiene un buen bigote que vale la pena mover ¡Feliz bigote! 😉

XD XD XD

XD XD XD

</script>

Anuncios