Share on FacebookTweet about this on TwitterShare on Google+

Una buena idea si trabajamos con ajax es dar formato a los datos que recibimos por json mediante algún tipo de template. Si debemos mostar el texto que recibimos mediante html, escribir todas las etiquetas de html y las variables mediante JavaScript suele ser engorroso.
Una buena opción es utilizar Handlebars. Handlebars son unos templates basados en los templates mustache y que se utilizan por ejemplo en sistemas como los framework MVC de JavaScript Ember u Meteor.
handlebars

Supongamos que llamamos a un script php para recibir un listado de jugadores de futbol. El script nos devolverá un json de la forma:

Si nosotros quisiéramos mostrar estos datos en el documento html, deberíamos recorrer el json y escribir los datos de cada jugador (nombre, apellido, equipo…) mediante un conjunto de etiquetas html y variables:

Está claro viendo el código anterior, que en función de la complejidad de los datos recibidos y del html “envolvente”, la lectura del código puede ser difícil y su modificación puede llevar a errores. Lo suyo sería definir un template semántico al que luego pasar los datos para generar la vista, de forma que no se mezclara con la lógica de programación.
Incluso podríamos definir varios templates diferentes y luego utilizar en cada parte el que más nos convenga para generar vistas a medida con el mismo conjunto de datos.
Esto es precisamente lo que hace handlebars. Definimos el template para solucionar el código anterior mediante:

Luego tendríamos que compilar el template mediante:

Posteriormente asociamos los datos al template correspondiente, que nos devolverá nuestro código html que posteriormente podremos asociar a algún elemento del DOM:

Podemos ver todo el código:

la

Mira el post sobre precompilación de handlebars, para ver como optimizar el código, especialmente importante en dispositivos móviles.

Leave a Reply

Your email address will not be published. Required fields are marked *