#19 [Q] Tips: Sistema de templating en jQuery

Tanto en proyectos web como en proyectos para móvil (aunque en estos últimos de manera más amplia y clara en el caso de estar desarrollando web apps) es muy común tirar de peticiones AJAX al servidor que devuelven un fichero JSON que ha de “completar” una plantilla prefabricada en XHTML, pero… ¿qué opciones tenemos para completar esa plantilla?

Primera aproximación: abusamos del servidor

La primera aproximación a la que la gente le coge el gusto es a que el propio servidor devuelva el HTML completo, lo cual es bueno y malo. Bueno porque simplifica notablemente el trabajo en el lado cliente (básicamente enchufar el resultado al elemento del DOM que nos interese…), y bueno porque es más flexible de cara a cambios drásticos en la estructura misma de la respuesta. La parte mala (y mucho) es que no estamos independizando la capa de datos de la presentación y eso hace que si de lo que hablamos es de una API o de un sistema que sea medianamente reaprovechable, nos estemos cargando de lleno su filosofía.

Segunda aproximación: móntatelo tu mismo

Partiendo de esa base, la segunda opción es tener una plantilla prediseñada en el HTML (y oculta), algo como esto (he obviado el primer intento “gorila” que sería escribir el HTML a pelo desde JavaScript):


Y emplearla como plantilla (clonándola) mediante jQuery y completarla a través de los selectores (en este caso via find), con algo similar a este código (suponiendo que en data tenemos la respuesta a la petición AJAX en JSON del servidor, con dos campos title y detail en un array de resultados):

$.each( data, function()
{
var newItem = $('#simple-template').clone();
newItem.find('h2').text(this.title);
newItem.find('p').text(this.detail);
newItem.children().appendTo('#result-list');
});
Tercera aproximación: Templating Engines

Esto está mejor que pegarse la escritura del HTML desde jQuery o JavaScript, pero es todavía mejor usar algún motor de plantillas existente, y que dan realmente buenos resultados como es el caso de jquery-tmpl que está específicamente pensado para su uso con jQuery y aceptado en su día como el motor de plantillas oficial, hasta que en abril del 2011 se paso el proyecto a jQuery UI, y finalmente se dejó en beta para centrarse en otros modelos en desarrollo como JsRender y JsViews (que esperamos comentar en futuras entradas del blog…)

Pero el motor está muy bien, se merece un respeto en nuestor blog, y además es sencillo y práctico. Para el ejemplo anterior pasaríamos a algo como esto:


y para hacer la magia, algo como esto otro (suponiendo que en data.results tuviéramos el array de resultados):

$('tmpl-item').tmpl(data.results).appendTo('#result-list');

¿La cosa mejora bastante no? No solo se queda ahí sino que si te preguntas si puedes controlar cosas dentro del template la respuesta es SI, soporta elementos adicionales como {{if}}, {{else}}, {{each}}, etc. y uso de funciones dentro del template, entre otras capacidades. La lista de demos es completa y bastante representativa.

Si ya habéis trabajado con este motor, o con JsRenders y JsViews, o con otros motores, estaría genial que nos dierais vuestro punto de vista, porque como decíamos el principio del post, es vital cuando se desarrollan aplicaciones web para dispositivos móviles con peticiones AJAX para la carga de los contenidos.