Balise template !

Can i use : template


En 2008, J. Resig écrivait un post JavaScript Micro-Templating.

Pour résumer, on écrit un Template sous la forme

    1. <script type="text/html" id="user_tmpl">
    2.   <% for ( var i = 0; i < users.length; i++ ) { %>
    3.     <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
    4.   <% } %>
    5. </script>



L'appel à une fonction va d'abord transformer grâce aux expression régulières le code puis l'exécuter.
La transformation sera sous la forme :

  1. var p=[];
    for ( var i = 0; i < users.length; i++ ) { 
       p.push('
  2. ' +  users[i].name + '
    3. ');
    }
    p.join(';');

Depuis, les bibliothèques ont facilité la prise en charge de code répétitif.

Balise template


Aujourd'hui, la balise template existe. Le contenu de la balise n'est pas visible.
Son manipulation en JS est simple.

  1. Clonage du template
  2. Modification du clone
  3. Ajout dans le DOM

HTML : 


     
     
     

JS

      const myTemplate = document.querySelector('#myTemplate');
  1. const clone = myTemplate.content.cloneNode(true);   
  2. clone.querySelector('img').src = `https:/.....jpg`; 
  3. document.body.appendChild(clone);

En action


https://jsbin.com/sazaqex/1/edit?html,css,js,console,output

Pour aller plus loin (le code de l'exemple devrait être réécrit en es6,)
https://jsbin.com/remosid/1/edit?html,js,output

Ref : http://www.w3.org/TR/html5/scripting-1.html#template-contents