contenido 16 de junio de 2014 a las 07.29
   Imprimir artículo
elWebmaster.com

HTML5: El uso de la etiqueta Template


html5logowideLas aplicaciones web modernas utilizan la manipulaci√≥n del DOM para cambiar din√°micamente las √°reas de la p√°gina o insertar valores. Un ejemplo t√≠pico es una tabla de figuras; la p√°gina inicial podr√≠a devolver encabezados de columna HTML y a continuaci√≥n inicializar una petici√≥n Ajax que devuelve varios registros de datos. Los datos se a√Īaden a la tabla, pero ¬Ņc√≥mo?

El desarrollador tiene dos opciones :

  1. JavaScript se utiliza para construir filas de HTML o fragmentos de DOM que se anexan a la tabla. Eso parece f√°cil hasta que necesitas hacer un cambio y tienes que cazar alrededor de tu JavaScript para asociarlo al c√≥digo HTML. Para hacer la vida m√°s sencilla, los desarrolladores a menudo regresan fragmentos de cadenas HTML enteras de la llamada Ajax, pero eso hace que la carga √ļtil sea m√°s detallada y se abre la posibilidad de ataques de Cross-Site Scripting .
  2. Por otra parte, se crea una primera fila vacía de la página HTML que se utiliza como una plantilla para todas las demás filas. Eso debería ser más fácil de mantener, pero tendrás que eliminarlo de la DOM o maquetarlo con display: none para asegurarte de que no aparecerá.

Ninguna solución es particularmente elegante.

Afortunadamente, el W3C ha introducido la nueva etiqueta template que proporciona un mecanismo para definir fragmentos de código HTML como prototipos.

En esencia , un template se puede utilizar para insertar fragmentos de código HTML en su página , por ejemplo:

<template id=”mytablerow”>

<tr>

<td class=”record”></td>

<td></td>

<td></td>

</tr>

</template>

El código de la plantilla se puede definir casi cualquier lugar, el <head>, el <body> o incluso <frameset>. Sin embargo:

  1. El template no se mostrará
  2. El¬†template no es considerado como parte del documento, es decir, utilizando document.getElementById (“mytablerow”) no volver√°n sus nodos internos.
  3. El template está inactivo hasta que se utilice, es decir, las imágenes adjuntas no descargarán, los broadcasts no se podrán reproducir, los scripts no se ejecutarán, etc.

Uso de template

Para utilizar un template, debe ser clonado e insertarse en el DOM. Por ejemplo, suponiendo el siguiente código HTML:

<table id=”mytable”>

<thead>

<tr>

<td>ID</td>

<td>name</td>

<td>twitter</td>

</tr>

</thead>

<tbody>


<!–filas a ser insertadas aqu√≠–>


</tbody>

</table>


<!– row template –>

<template id=”mytablerow”>

<tr>

<td class=”record”></td>

<td></td>

<td></td>

</tr>

</template>

Nosotros podemos clonar una nueva fila en Javascript:

// buscando el tbody y row del template

var t = document.querySelector(“#mytable tbody”),

row = document.getElementById(“mytablerow”);


// modificar la data del row

var td = row.getElementsByTagName(“td”);

td[0].textContent = “1”;

td[1].textContent = “SitePoint”;

td[2].textContent = “sitepointdotcom”;


// clonar el row e insertarlo en la tabla

t.appendChild(row.content.cloneNode(true));


La pregunta importante: ¬Ņse pueden usar etiquetas de template?

Probablemente todav√≠a no. Es soportado en la √ļltima versi√≥n de Chrome y Firefox. Opera soportar√° la etiqueta cuando se cambie a Blink. Ni una palabra de los equipos de IE y Safari.

La etiqueta Template es una forma sencilla de estandarizar las técnicas de plantillas para los desarrolladores HTML5.

Fuente original del artículo: Sitepoint
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. Vick dice:

    Y cual es mas recomendable, esta etiqueta ? o los manejadores de templates con underscore,handlebars etc..

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder