L'elemento template di HTML5
Analisi ed uso del nuovo tag template di HTML5
// Linguaggio HTML
Davide Bausach
/ 25-03-2016
Uno dei nuovi tag introdotti in HTML5 è il tag <template>, sicuramente presente da diversi anni, ma mi è tornato utile solo di recente in funzione di un'esigenza ormai comune nella realizzazione di OPA (One Page Application).
Nella realizzazione di OPA è molto frequente la necessità di dover cambiare, sostituire, spostare elementi del DOM generandone di nuovi con JavaScript, a volte interi elementi della view (ovvero la vista HTML da manipolare) vengono richiamati mediante la tecnologia ajax (è possibile trovare qui la funzione ajax della libreria dBJs) per poi essere posizionati nel punto della pagina stabilito; altre volte può essere necessario crearli dinamicamente con la relativa l'istruzione JavaScript (esempo: document.createElement('div')).
Il tag template ci viene in contro da questo punto di vista essendo un elemento studiato proprio per le necessità sopra descritte. Infatti utilizzando questo tag è possibile inserire al suo interno un'insieme di elementi HTML, interi pezzi di view, per poi utilizzarli in seguito.
Il contenuto del tag template è un oggetto document-fragment che al rendering della pagina web viene caricato in memoria dal browser ma viene tenuto nascosto.
L'utilizzo successivo è sicuro a questo punto ovvio: all'occorrenza è possibile richiamare questo oggetto nei nostri script ed eventualmente manipolarlo e appenderlo (con la funzione appendChild() nativa di JavaScript) in altri elementi della pagina così da ottenere i risultati voluti, senza dover creare tutti gli elementi da codice ed appenderli singolarmente gli uni dentro gli altri.
Un esempio di utilizzo può essere quello di inserire dinamicamente delle righe in una tabella, introducendo poi nei relativi table data i valori con JavaScript ottenendo un riferimento ai singoli td (esempio: td[0].textContent = 'myContent'):
Detto questo lascio a voi tutte le prove, i test e future implementazioni del tag template di HTML5!
Nella realizzazione di OPA è molto frequente la necessità di dover cambiare, sostituire, spostare elementi del DOM generandone di nuovi con JavaScript, a volte interi elementi della view (ovvero la vista HTML da manipolare) vengono richiamati mediante la tecnologia ajax (è possibile trovare qui la funzione ajax della libreria dBJs) per poi essere posizionati nel punto della pagina stabilito; altre volte può essere necessario crearli dinamicamente con la relativa l'istruzione JavaScript (esempo: document.createElement('div')).
Il tag template ci viene in contro da questo punto di vista essendo un elemento studiato proprio per le necessità sopra descritte. Infatti utilizzando questo tag è possibile inserire al suo interno un'insieme di elementi HTML, interi pezzi di view, per poi utilizzarli in seguito.
Il contenuto del tag template è un oggetto document-fragment che al rendering della pagina web viene caricato in memoria dal browser ma viene tenuto nascosto.
L'utilizzo successivo è sicuro a questo punto ovvio: all'occorrenza è possibile richiamare questo oggetto nei nostri script ed eventualmente manipolarlo e appenderlo (con la funzione appendChild() nativa di JavaScript) in altri elementi della pagina così da ottenere i risultati voluti, senza dover creare tutti gli elementi da codice ed appenderli singolarmente gli uni dentro gli altri.
Un esempio di utilizzo può essere quello di inserire dinamicamente delle righe in una tabella, introducendo poi nei relativi table data i valori con JavaScript ottenendo un riferimento ai singoli td (esempio: td[0].textContent = 'myContent'):
<template id="myTemplate">
<tr>
<td><td>
<td></td>
</tr>
</template>
Detto questo lascio a voi tutte le prove, i test e future implementazioni del tag template di HTML5!