Desde que se inició el boom del desarrollo de aplicaciones web utilizando extensamente javascript, el uso de plantillas se ha convertido en casi una necesidad ya que es una forma de aligerar la carga sobre clientes y servidores evitando utilizar trozos de código html que puede o no sean utilizados por los usuarios.
Comunmente el uso de plantillas se populariza cuando se hacen peticiones vía ajax al servidor y este retorna información en denotación JSON.. anteriormente lo que se hacía era retornar todo el bloque de html e incrustarlo sobre el DOM .. y si, seguramente algunos devs lo siguen haciendo ya que no tiene nada de malo esta práctica..
jQuery template es un plugin desarrollado por el equipo de desarrollo de ASP.NET de Microsoft en colaboración del Core Team de jQuery (que por cierto ya no dan mantenimiento a este plugin), se puede utilizar desde la versión 1.5 de jQuery en delante y se puede encontrar su código fuente en https://github.com/BorisMoore/jquery-tmpl
Este artículo será una pequeña introducción al uso de plantillas con jQuery, sé que hay muchas alternativas, pero de tantas ésta es una de las menos complejas y fáciles de implementar.. entonces manos a la obra.
Lo básico
Suponiendo que tienes un objeto Json con la siguiente información.
var data = { titulo: 'Esto se utiliza como titulo', descripcion: 'Esto podría ser una descripción de un producto o lo que se te ocurra' }; |
Y necesitas mostrar en tu aplicación el contenido de la variable data al hacer click en algún botón (suponiendo)..
Entonces el siguiente paso sería crear una porción de html dentro de tu documento que básicamente es la plantilla y se vería como lo siguiente.
<script id="itemList" type="text/x-jQuery-tmpl"> <div> <h2>${titulo}</h2> Descripción: ${descripcion} </div> </script> |
Hey, pero esperen.. aquí hay un par de cosas nuevas, por ej.. porque el código de la plantilla está dentro de una etiqueta de script y porque se está utilizando un mime/type que no conocías ??
Pues bien, según la explicación de los autores, utilizar el tag script es meramente de conceptualización (osea porque así lo decidieron, pero se puede omitir el tag script y utilizar un tag cualquiera con el atributo “display:none”) y lo del mime/type desconocido es porque los navegadores omitirán cualquier mime/type desconocido y no lo renderizarán..
Otra cosa que se puede notar es que se utiliza la expresión ${…} la cual contiene el valor enviado hacia la plantilla. Por ejemplo, se utiliza la expresión ${titulo} para mostrar el título de un producto en mi ejemplo, el cual se obtiene desde el objeto “data”.
Continuando con mi ejemplo lo último sería mezclar el contenido de la variable data con el contenido de la plantilla al hacer click sobre un botón y renderizarlo dentro de un tag con id content..
$('#miboton').on('click', function(){ $('#itemList').tmpl(data).appendTo('#content'); }); |
Ahora, todo el código completo para que no se pierdan..
<html> <head> <title>Jquery Template Demo</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> </head> <body> <input type="button" id="miboton" value="probar" /> <div id="content"></div> <script id="itemList" type="text/x-jQuery-tmpl"> <div> <h2>${titulo}</h2> Descripción: ${descripcion} </div> </script> <script type="text/javascript"> $(document).ready(function(){ $('#miboton').on('click', function(){ $('#itemList').tmpl(data).appendTo('#content'); }); }); </script> </body> </html> |
Jquery Templates como decía es muy sencillo de utilizar e incluye algunas palabras reservadas para extender su funcionalidad por ej.
{{tmpl}} – Para mezclar una plantilla dentro de otra
{{each}} – Para iterar dentro de una colección de datos o arreglos
{{if}} {{else}} {{/if}} – Uso de condicionales
Lo malo y como arreglarlo
Ahora, que tal si llegases necesitan muchas plantillas porque hay muchas partes del código que son dinámicas ?? para ese caso crees que deberías de incrustar muchos scripts de tmpl en tu documento y si así fuese, en que me ayudaría en la carga entre cliente/servidor ?? no sería de mucha ventaja cierto.. pero una forma de resolverlo y es utilizando ajax también para cargar las plantillas..
Veamos el mismo ejemplo, pero cargado la plantilla via ajax.. sigamos suponiendo que la plantilla ahora se encuentra en un archivo llamado item.html .. y siguiendo el ejemplo anterior, ahora al presionar sobre el botón se debería de pedir la plantilla, mezclar con el contenido de data y luego mostrarla en pantalla dentro de la etiqueta content.
$('#miboton').on('click', function(){ $.get('item.html', function(template){ $.tmpl(template, data).appendTo('#content'); }); }); |
Y con eso se han librado de tener plantillas dentro del documento y obtendrían una mejor organización en su proyecto.
Co-fundador de Qbit Mexhico, usuario de linux, Developer en tecnologías web.. Nicaragüense, centro en basketball, primer centro en rugby y pintor los fines de semana. Ortögrafo y ambientalista psicológico (de escritorio).. ese soy yo!
Si te ha servido compártelo y difunde nuestro blog..
Hola;
Si el json que traigo es una consulta de muchos registros como hago la implementacion de las plantillas.
Gracias
Hola Jorge, tienes 2 formas de hacerlo, la primera es iterando tu objeto y creando un objeto literal para luego pasarlo a la plantilla, donde básicamente renderizarías una plantilla por cada iteración y la otra forma es enviando tu objeto completo a la plantilla y dejar que el motor de plantillas de jquery haga el trabajo, para este último, lo único que necesitarías seria utilizar el ciclo each .. un ejemplo medio burdo sería lo siguiente:
{{each(indice, valor) nombres}}
Nombre – ${indice}: ${valor}
{{/each}}
Donde nombres representa la colección de elementos.
Espero esto que ejemplifico pueda orientarte un poco.
Saludos