Sumari
L'element HTML plantilla <template>
és un mecanisme per mantenir el contingut del costat del client que no es renderizará quan es carregui una pàgina, però posteriorment es instanciará durant el temps d'execució mitjançant Javascript.
Penseu en una plantilla com un fragment de contingut que s'emmagatzema per al seu ús posterior en el document. Mentre que l'analitzador fa processar el contingut de l'element <template>
durant la càrrega de la pàgina, ho fa només per assegurar-se que aquests continguts són vàlids; No obstant això, el contingut de l'element no es representa.
Categories de contingut | Contingut metadata, contingut dinàmic, contingut textual, element de suport script |
---|---|
Contingut permès | Contingut metadata, contingut dinàmic, qualsevol contingut HTML vàlid que es permet que passi dins dels elements <ol> , <dl> , <figure> , <ruby> , <object> , <video> , <audio> , <table> , <colgroup> , <thead> , <tbody> , <tfoot> , <tr> , <fieldset> , <select> , <details> i <menu> l'atribut type és en l'estat de menú emergent |
Omissió de l'etiqueta | Cap, tant l'etiqueta inicial com l’etiqueta final són obligatòries |
Elements pares permesos | <body> , <frameset> , <head> and <colgroup> sense un atribut span |
Interfície DOM | HTMLTemplateElement |
Atributs
Aquest element inclou els atributs globals.
També hi ha un atribut content
, que és de només lectura i proporciona l'accés als continguts de la plantilla. L'existència de l'atribut content
s'utilitza sovint com una manera de determinar si el navegador de l'usuari suporta l'element <template>
.
Exemple
Primer començarem amb la part HTML de l'exemple.
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- existing data could optionally be included here -->
</tbody>
</table>
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
En primer lloc, tenim una taula en la qual més endavant inserirem el contingut mitjançant codi JavaScript. Després ve la plantilla, que descriu l'estructura d'un fragment d'HTML que representa una sola fila de la taula.
Ara que la taula s'ha creat i la plantilla definida, fem servir JavaScript per a inserir files a la taula, amb cada fila construïda usant la plantilla com a base.
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
// Instantiate the table with the existing HTML tbody and the row with the template
var t = document.querySelector('#productrow'),
td = t.content.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
// Clone the new row and insert it into the table
var tb = document.getElementsByTagName("tbody");
var clone = document.importNode(t.content, true);
tb[0].appendChild(clone);
// Create a new row
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans";
// Clone the new row and insert it into the table
var clone2 = document.importNode(t.content, true);
tb[0].appendChild(clone2);
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
El resultat és la taula HTML original, amb dues noves files afegides a través de JavaScript:
Especificacions
Especificació | Estat | Comentari |
---|---|---|
HTML Living Standard The definition of 'template element' in that specification. |
Living Standard | Cap canvi |
HTML5 The definition of 'template element' in that specification. |
Recommendation | Definició inicial |
Navegadors compatibles
Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Suport bàsic | 26 | 22 (22) | Edge 13 | 15 | 7.1 |
Característica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Suport bàsic | ? | ? | ? | ? | iOS 8 |