Para solventar el uso de templates, personalmente uso y me encanta Mustache, ya que tiene
El 7 de mayo, se publicó el borrador de la etiqueta template de HTML5, Y se puede hacer algo como esto:
HTML:
<template id="template-row">
<tr class="">
<td></td>
<td></td>
<td></td>
</tr>
</template>
<tr class="">
<td></td>
<td></td>
<td></td>
</tr>
</template>
Y repetir el template dentro de una tabla con el siguiente script:
JAVASCRIPT:
var t = document.querySelector("#tabla tbody"),
row = document.getElementById("template-row");
var td = row.getElementsByTagName("td");
td[0].textContent = "1";
td[1].textContent = "Nombres";
td[2].textContent = "Apellidos";
t.appendChild(row.content.cloneNode(true));
row = document.getElementById("template-row");
var td = row.getElementsByTagName("td");
td[0].textContent = "1";
td[1].textContent = "Nombres";
td[2].textContent = "Apellidos";
t.appendChild(row.content.cloneNode(true));
El código anterior permite reutilizar el template dentro de una tabla en cualquier contexto. Este ejemplo fue la fila de una tabla, sin embargo podemos usarlo con listas, párrafos, imágenes o lo que se nos ocurra siguiendo algunas limitaciones.
Para tener en cuenta:
- El código dentro de
templateno es mostrado por el navegador. - El código dentro de
templateno es parte del documento, es decir quedocument.getElementById('#template-row');no tiene hijos. - Los templates son inactivos hasta que son usados, es decir, que las imágenes no se cargan, archivos multimedia no son reproducidos y scripts no son ejecutados.
Por el momento ningún navegador soporta la etiqueta, pero ya lo veremos muy pronto. Podemos ver un ejemplo completo se puede ver en JSFiddle, por mientras todavía nos queda Mustache.
Visto en Frontend.pe.
