En esta peque\u00f1o tutorial veremos un ejemplo b\u00e1sico del uso de handlebars, que nos permita descubrir y entender\u00a0las principales partes implicadas en el trabajo con este motor de plantillas del lado cliente, que se caracteriza por no a\u00f1adir pr\u00e1cticamente l\u00f3gica funcional a las plantillas, centr\u00e1ndose en al sem\u00e1ntica.<\/p>\n
Los principales elementos en el trabajo con Handlebars son:<\/p>\n
Veamos uno a uno el uso de \u00e9stos elementos para lograr el objetivo que no es otro que simplificar al m\u00e1ximo la generaci\u00f3n de contenido HTML a partir de un conjunto de datos con car\u00e1cter din\u00e1mico.<\/p>\n
Como dec\u00edamos el contexto es el conjunto de datos que permitir\u00e1 crear a partir de la plantilla un resultado de salida espec\u00edfico, este contexto puede ser un elemento simple o complejo, ya que handlebars permite acceder a propiedades en objetos anidados a trav\u00e9s de sus denominados \u00abnested paths<\/em>\u00ab.<\/p>\n La plantilla normalmente es un fragmento de HTML que incluye elementos adicionales conocidos como expresiones. Estas expresiones se evaluar\u00e1n al aplicar el contexto para generar el resultado final. Para incluir una plantilla handlebars en nuestro proyecto empleamos la etiqueta <script><\/span>\u00a0 con un valor\u00a0espec\u00edfico para el atributo type<\/span>\u00a0\u00a0y en su interior definimos el HTML que queremos emplear como plantilla.<\/p>\n En la plantilla podemos observar los mecanismos de interacci\u00f3n con el contexto, a trav\u00e9s de las expresiones encerradas entre llaves. Si nos fijamos adem\u00e1s disponemos de alguna funcionalidad adicional como #each<\/span>\u00a0 para recorrer un array (se denominan built-in helpers<\/em>), aunque en el caso de este motor de plantillas son muy pocas ya que precisamente se centra solo en la sem\u00e1ntica, y no quiere \u00abengordar\u00bb con funcionalidad prefabricada y l\u00f3gica de aplicaci\u00f3n.<\/p>\n La plantilla anterior, b\u00e1sicamente lo que har\u00eda es recorrer la lista de usuarios que alberga el array usuarios<\/span>\u00a0\u00a0<\/strong>y por cada elemento de dicho array, mostrar\u00eda la posici\u00f3n, el nombre y los puntos. Se aprecia como nombre<\/span>\u00a0 y puntos<\/span>\u00a0 son propiedades de cada objeto del array, sin embargo se ha hecho uso de un helper<\/em> personalizado denominado obtenerRanking<\/span>\u00a0 que lleva el control de posici\u00f3n en cada iteraci\u00f3n del bloque #each<\/span>\u00a0.<\/p>\n En realidad Handlebars cuenta con la variable {{@index}}<\/span>\u00a0 dentro de un bloque #each<\/span>\u00a0, pero esta comienza en 0 por lo que se ha hecho uso de un helper<\/em> personalizado para lograr comenzar en 1, y de paso a\u00f1adir este elemento tan necesario en el uso de Handlebars en el mismo.<\/p>\n La inclusi\u00f3n de la librer\u00eda se puede hacer desde una\u00a0CDN\u00a0de entre las existentes (por ejemplo cdnjs.cloudflare.com<\/a>cdnjs.cloudflare.com<\/a>) o descarg\u00e1ndola desde el sitio oficial (handlebarsjs.com<\/a>) para usarla localmente. Como en otras ocasiones, puede ser recomendable la combinaci\u00f3n de ambos m\u00e9todos para lograr optimizar la carga de la misma, con un c\u00f3digo como el siguiente:<\/p>\n Para ver este ejemplo funcionando, pod\u00e9is hacer uso del proyecto en GitLab en el que se ha basado este tutorial, que est\u00e1 accesible simplemente accediendo a:\u00a0https:\/\/gitlab.com\/qmarcos\/handlebars-basics<\/a><\/p>\n Para ver en acci\u00f3n y poder probar este motor sin ni siquiera requerir una instalaci\u00f3n local, existe un recurso muy interesante que nos permite jugar con la mec\u00e1nica del mismo empleando todos los elementos que pueden necesitarse: plantilla, contexto, helpers… Este recurso se encuentra en\u00a0http:\/\/tryhandlebarsjs.com<\/a><\/p>\n A continuaci\u00f3n se recogen una serie de referencias relevantes para el aprendizaje b\u00e1sico de Handlebars, as\u00ed como la documentaci\u00f3n oficial.<\/p>\n <\/p>","protected":false},"excerpt":{"rendered":" En esta peque\u00f1o tutorial veremos un ejemplo b\u00e1sico del uso de handlebars, que nos permita descubrir y entender\u00a0las principales partes implicadas en el trabajo con este motor de plantillas del lado cliente, que se caracteriza por no a\u00f1adir pr\u00e1cticamente l\u00f3gica funcional a las plantillas, centr\u00e1ndose en al sem\u00e1ntica. Los principales elementos en el trabajo con … <\/p>\nvar data = {\r\n usuarios: [\r\n {\r\n nombre: 'Marcos',\r\n puntos: 1254\r\n },\r\n {\r\n nombre: 'Carlos',\r\n puntos: 1157\r\n },\r\n {\r\n nombre: 'Mariano',\r\n puntos: 0\r\n },\r\n {\r\n nombre: 'Jose Luis',\r\n puntos: 0\r\n }\r\n ]\r\n};<\/pre>\nLa plantilla<\/h3>\n
<script id=\"user-template\" type=\"text\/x-handlebars-template\">\r\n <table class=\"table\">\r\n <thead>\r\n <tr>\r\n <th>#<\/th>\r\n <th>Usuario<\/th>\r\n <th>Puntuaci\u00f3n<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n {{#each usuarios}}\r\n <tr>\r\n <td>{{obtenerRanking}}<\/td>\r\n <td>{{nombre}}<\/td>\r\n <td>{{puntos}} puntos.<\/td>\r\n <\/tr>\r\n {{\/each}}\r\n <\/tbody>\r\n <\/table>\r\n <\/script><\/pre>\nLa librer\u00eda<\/h3>\n
<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/handlebars.js\/4.0.5\/handlebars.min.js\"><\/script>\r\n <script>window.Handlebars || document.write('<script src=\"js\/vendor\/handlebars-v4.0.5.js\">\\x3C\/script>');<\/script><\/pre>\nEl ejemplo en funcionamiento<\/h3>\n
Aprendiendo\u00a0a usarlo online<\/h3>\n
Referencias<\/h3>\n
\n