Cuando desarrollamos un proyecto web, en algunas ocasiones nos sucede, que necesitamos consultar datos de algún lugar remoto, y posteriormente mostrarlos en pantalla, de manera asincrona claro, para mejorar la usabildad, o así mismo, nos ha pasado, que tenemos algun formulario pequeño, que no queremos enviar por post para no recargar la página y queremos implementar ajax para mejorar un poco la usabilidad del sitio, y sin embargo, luego devolver los datos guardados para mostrarlos al usuario al momento.
Una practica muy común que he visto en muchas personas que empiezan a desarrollar para web, es incrustar código html con javascript de la siguiente manera:
Esto, a pesar de que funciona, por que en realidad funciona excelente, no es lo mejor o digamos, no es algo muy «profesional», en esta ocasión, quiero compartir con ustedes, primero que nada, el concepto de plantillas para implementarlo en sus proyectos web, y posteriormente, enseñarles una forma muy sencilla de implementar plantillas con etiquetas propias de html 5 y javascript, esto, con el proposito de que ustedes conozcan una tecnica más para mejorar su desarrollo y así ser, cada día mejores.
Bien, primero que nada, una plantilla, es un medio mediante el cual, nosotros separamos el contenido de la información, del diseño, es decir, supongamos que nosotros ya hemos estilizado una sección de codigo html, tal y como se ve en la imagen superior, la parte de la agenda (lado izquierdo), ya contiene una sección de contenido, que son los contactos, cada contacto ya tiene un estilo predefinido, entonces, una plantilla, es digamos, esa parte de codigo html que nosotros podremos reutilizar muchas veces, a la cual, pudiesemos pasarle una serie de parametros, y que nos devuelva un texto, ya renderizado para simplemente, introducirlo en el documento html, y que css haga su trabajo de estilizarlo.
Bien, para este ejemplo, e preparado un pequeño archivo que contiene html, css y javascript, funcionando sin problemas, disponible para ustedes en un gist de github por si desean descargarlo o simplemente darle un vistazo.
Bien, vamos a lo obvio, el archivo cuenta con un formulario, y una sección llamada «directorio» donde nosotros vamos a ir agregando cada elemento que se agregue mediante el formulario, para esto, haremos uso de una etiqueta de html 5 llamada template:
[gist id=»02da0b93da209154cb8c» lines=»127-133″]
Esta etiqueta es una de las «nuevas» etiquetas de html, diseñada especificamente para el manejo de plantillas, si nos damos cuenta, al agregar este pedazo de codigo html, este será completamente invisible en el sitio, como mencione, esta diseñada solo para manejo de plantillas, por consecuente, permanecerá oculta, bien, ahora, ¿que es lo que haremos?, como no queremos que el formulario genere un submit a la página (por que recargaría el sitio), lo que hacemos es interrumpir su evento con ayuda de jquery, y aplicarle al evento un preventDefault, esto, evitará que el formulario envie datos e intente hacer un submit.
[gist id=»02da0b93da209154cb8c» lines=»138-139″]
Bien, una vez hecho esto, obtenemos los datos de los tres campos de información del formulario, para este caso particular, estoy haciendo caso omiso de validaciones, entre otras cosas.
[gist id=»02da0b93da209154cb8c» lines=»141-143″]
Ahora bien, el paso importante es el siguiente:
[gist id=»02da0b93da209154cb8c» lines=»145-147″]
¿Que es lo que sucedio?, sencillo, primero que nada, obtenemos la plantilla gracias a la función querySelector de javascript, y la almacenamos en una variable, ¿Por que hacerlo con JQuery?, por que recuerden que JQuery nos devuelve otro objeto JQuery cada vez que ejecutamos una instrucción, y no funcionaría como queremos, ahora bien, teniendo nuestro template almacenado en una variable «template», procedemos a ir extrayendo cada una de las etiquetas e ir llenandolas de información, esto lo hacemos con la función template.content.querySelector, que nos permite ir seleccionando etiquetas dentro de la plantilla, y así irles poniendo información, pero que sucede con la etiqueta div, que contiene un strong y un span, para esta etiqueta, hacemos exactamente lo mismo, la obtenemos de la plantilla, y luego, hacemos nuevamente un querySelector para obtener el span, y lo llenamos con datos.
[gist id=»02da0b93da209154cb8c» lines=»149-154″]
Ahora bien, una vez que hemos llenado todos los datos de la plantilla, el paso final, es obtener una cadena de texto con la plantilla armada y colocarla en el contenedor, que en mi caso tiene el id «directorio»:
[gist id=»02da0b93da209154cb8c» lines=»156-158″]
Por ultimo, solo para efectos estesticos, limpiamos nuevamente los campos del formulario y retornamos un valor false para que el formulario no siga ejecutando ninguna más de sus funciones normales.
[gist id=»02da0b93da209154cb8c» lines=»160-164″]
Y listo, con esto tendriamos el código del final tal y como se los mostre el el gist inicial:
[gist id=»02da0b93da209154cb8c» lines=»135-168″]
Y listo!, con eso tenemos implementado un sitema básico de templates con puro Html 5, y JavaScript, pueden ver un demo funcionando en el siguiente enlace:
Ver Demo
Ahora bien, no quiero irme sin antes mencionar un ultimo tema, es obvio que este método es mucho más eficiente que el tradicional que les mostre al principio, pero que sucederia en un caso algo más particular donde se requirea hacer algo como por ejemplo, que consultemos la información de un cliente, y que este cliente pueda o no tener una lista de telefonos, si la tiene, mostrariamos todos los telefonos del cliente, obviamente con un ciclo, y que tuvieramos que guiarnos agregandole atributos a las etiquetas conteniendo los ids de los clientes para posteriormente aplicar ciertas acciones. Ahi, es cuando las cosas se complicarían un poco, ya que habría que introducir condiciones, validaciones, ciclos y quizá por que no, algunos filtros, es ahi cuando este método se vuelve algo tedioso, aunque sigue siendo mejor que el tradicional, para este tipo de situaciones, contamos con el apoyo de los motores de plantillas, o engines, que son mucho más poderosos que este método, claro, esto, lo veremos proximamente en otro post, por lo pronto, espero que esto les sea de gran ayuda, hasta la proxima.