Hasta hace unos años, cuando un desarrollador quería hacer templates de sus páginas , la opción era usar algún lenguaje en el Backbend como PHP, Ruby, Python, etc.
Actualmente el uso de templates es posible del lado del Frontend usando JavaScript. Para manejar dichos los templates tenemos algunos engines como:Jade, Swig, Mustache, Handlebars, etc.
Gracias a la popularidad de estos motores de templates la WhatWG creó una etiqueta nueva en HTML5 poco conocida, que gracias a los Web Components se está volviendo cada vez más popular, la etiqueta <template>.
Soporte
No todos los navegadores soportan la etiqueta <template>. Actualmente es soportado por Firefox +22, Chrome +26, Safari +7.1, Opera +15, iOS Safari +8, Android Browser +4.4, Opera Mobile +24, Chrome for Android +39 y Firefox for Android +33, Internet Explorer no tiene soporte alguno a esta etiqueta.
Para poder detectar si el navegador que el usuario está usando tiene soporte para esta etiqueta simplemente creamos el elemento del DOM con JavaScript y nos fijamos si posee la propiedad .content.
Código :
if ('content' in document.createElement('template')) {
// Funciona!
} else {
// Usamos algún motor de templates
}
Creando el template
La etiqueta <template> es esencialmente un elemento clonable del DOM para ser reutilizado en tu sitio o aplicación web. Para crear un template simplemente escribes HTML común y lo colocas dentro de la etiqueta <template>.
Código :
<template id="template"> <h1></h1> </template>
Características principales
Envolver contenido dentro de <template> nos da cuatro características importantes.
1) El contenido es parseado e interpretado por el navegador, pero no renderizado por lo que es invisible para el usuario.
2) Cualquier contenido dentro del template no tiene efectos secundarios. Los scripts no se ejecutan, las imágenes no cargan, el audio no suena y los vídeos no se reproducen, hasta que el template sea usado.
3) El contenido del template no es considerado parte del documento, hacer un document.getElementById() o .querySelector() no va a regresar los elementos del template.
4) El template puede ser colocado en cualquier parte dentro de <head>, <body> o <frameset> y puede contener cualquier tipo de contenido que sea posible usar dentro de estos elementos.
Activando los templates
Para usar un template hay que activarlo, de otra forma nunca va a ser renderizado. La forma más simple es copiar el .content usando document.importNode(). La propiedad .content la representación en JavaScript del contenido del template y desde donde se puede acceder a todo el contenido de este.
Código :
var t = document.querySelector('#template');
var clone = document.importNode(t.content, true);
clone.querySelector('h1').innerHTML = 'Hola Cristalab';
document.body.appendChild(clone);
Luego de colocar el clon del template en nuestra aplicación el contenido es renderizado, en este ejemplo dentro del h1 se coloca el string Hola Cristalab y se renderiza todo el HTML del template.
Como usarlo en Internet Explorer y otros navegadores viejos
Aunque la etiqueta <template> no tiene soporte en Internet Explorer es posible utilizarlo gracias a la librería HTML5Shiv, que por cierto forma parte de de Modernizr por lo que si están usando este, entonces ya tienen HTML5Shiv y ya pueden usar la etiqueta <template>.
Hay sin embargo una pequeña diferencia entre el soporte nativo de la etiqueta y el que permite HTML5Shiv y es que el soporte nativo funciona como está explicado arriba, mientras que HTML5Shiv lo que hace es crear el elemento usando document.createElement() y luego le pone el estilo display: none por defecto, por lo que durante muy poco tiempo es posible que el usuario vea el contenido del template.
Demo
Pueden ver una demo del código de arriba en CodePen en el siguiente link:
http://codepen.io/sergiodxa/pen/EaNwVz[/img]
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por alfonso3w el 12 de Enero de 2015
Muy interesante, no tenia idea de esa etiqueta
Saludos
Por bienvenidosaez el 12 de Enero de 2015
Anonymous :
Creo que va a depender de las librerías que surgan para trabajar con esta etiqueta, la etiqueta en si misma es un contenedor de templates para no tener que trabajar sobre strings en JS y en lugar de eso usar el DOM directamente.
Ahora mismo estoy haciendo una librería de template que usa esta etiqueta, y colocandole que busque dentro del contenido palabras entre {{ y }} podes hacer lo mismo que con motores como Jade o Handlebars de pasarle un objeto con distintos valores y que las sustituya, también se puede hacer que le pases nombres de clases y con JS los buscas y colocas el contenido adentro.
Hay muchas formas de hacer un uso muy bueno de la librería, igualando y quizás hasta superando motores como Jade o Handlebars, obviamente estos van a seguír teniendo ventaja en que los podés usar en el backend con Node.js, pero para templates en el frontend esta etiqueta me parece mucho mejor.
Por Pretzel el 17 de Enero de 2015
http://bit.ly/1CkMQio
¡Muchas gracias!
Por alfredo gomez santiz el 22 de Enero de 2015
alfredo gomez santiz :
Hay una demo al final, si querés una demo más interesante podés ver:
http://codepen.io/sergiodxa/pen/XJNeXQ
En esta demo tenés un input y un botón y al hacer click en el botón se usa un template para colocar un h1 con el texto que ingreses en el input.
Y si querés probar algo aún mejor hice una librería que podes bajar con NPM llamada IgataJS:
http://sergiodxa.github.io/IgataJS/
Con esta librería podes tener un template con textos entre {{ y }} y con una función le pasas un objeto indicando que va en cada lugar del template y luego te devuelve el HTML del template para que lo coloques como quieras en tu sitio.
Por Andre el 22 de Mayo de 2015
Por Ana S. el 23 de Octubre de 2015
Por miguel2015 el 27 de Octubre de 2015