Un nouvel élément HTML est en voie de standardisation. Il s’agit du template tag (<template>). La dernière version du brouillon date de ce jour, 5 mars.
Son rôle ? Permettre de gérer des templates côté client. Voyons de plus près comment cela va fonctionner.
Après avoir découvert dans ces pages les nouvelles API HTML5 dont les spécifications sont maintenant validées, commençons à regarder ce qui va se passer après avec pour commencer le template tag.
Tout d’abord, cet élément étant encore en discussion, il est susceptible de changer d’ici à son intégration dans les standards. A titre d’information, vous pouvez aller voir le brouillon en question sur le site du W3C. Cet article reprend en français une partie des informations que vous pourrez trouver en anglais sur le site html5rocks.
A quoi sert le template Tag ?
Son rôle est de permettre de gérer des templates côté client. Côté serveur, cela existe déjà. Vous utilisez peut être un outil de templating comme Twig (le moteur de template de Sensio Labs, l’éditeur de Symfony), Smarty ou vous utilisez les vues intégrées de votre framework PHP préféré s’il n’utilise pas un outil de templating externe.
Côté client en revanche, il n’existe pas vraiment de solutions équivalentes. Cela sera donc d’ici quelques temps chose faite avec ce nouvel élément.
Comment fonctionne le template Tag
La portion de template se déclare comme suit :
&lt;template id="templateArticle"&gt;
&lt;div class="introductionArticle"&gt;&lt;/div&gt;
&lt;div class="corpsArticle"&gt;&lt;/div&gt;
&lt;/template&gt;
Ce code HTML est inactif jusqu’à l’activation du template. Le contenu n’est pas chargé, les scripts ne sont pas exécutés et les éléments ne sont pas accessibles par parcours du DOM en Javascript. Vous pouvez ainsi déclarer plusieurs « briques » HTML que vous pourrez ensuite utiliser et ré-utiliser.
Quand vous avez besoin du template, vous pouvez l’activer et charger le contenu en Javascript, par exemple en utilisant la propriété .cloneNode.
Pour plus de détails quant à l’implémentation de ce template, je vous invite à aller sur le site html5rocks, à cette adresse : http://www.html5rocks.com/en/tutorials/webcomponents/template
Vous trouverez un tutoriel complet, et une démo.
Ce tag template va pouvoir se coupler avec le Shadow DOM (lire cet article dans nos pages) et les custom elements pour créer de véritables composants web encapsulés en HTML et Javascript.
Bonjour, et merci pour cet article.
J’aurais bien aimé trouvé un fichier à télécharger, car pour le moment, je ne comprends pas bien l’utilisation de ce tag. Le tuto d’HTML5rock avec le alert(‘Thanks!’) dans le tag template est interprété; ce qui je pense ne devrait pas être le cas. Je ne sais pas sur quel navigateur ce tag fonctionne correctement.
Mais pour l’instant sur le dernier chrome, j’ai le sentiment que ca ne passe pas bien.
Auriez vous des infos / un exemple à ce sujet ?
merci
Bonjour,
Merci pour votre commentaire.
Contrairement au Shadow DOM (autre article sur ce site) qui tourne dès Chrome 25, le template tag ne fonctionne qu’à partir de la version 26. Elle n’est actuellement disponible qu’en béta, vous pourrez la trouver par exemple ici :
http://www.01net.com/telecharger/windows/Internet/navigateur/fiches/101878.html
Si vous êtes allé sur Html5Rocks, vous avez pu voir en entête de l’article un pavé dans lequel vous trouverez « Supported Browsers ». Si votre navigateur n’est pas compatible avec la fonctionnalité de l’article, vous verrez une phrase en rouge « Your browser may not support all of the functionality in this article ».
Cela doit expliquer votre problème, car si vous mettez à jour votre navigateur avec les versions stables vous devez être à la version 25.
Cordialement