Programmation Web Avancée

Blogue

Les cours

Utiliser des templates en JavaScript


Rédigé par , le
Si votre JavaScript modifie vos pages Web dynamiquement via ajax ou autre, l'utilisation des templates en JavaScript est pour vous.

Voici un exemple de modification d'une page Web sans utiliser de template.

<div id="item-container"></div>

<script>
function ajouter(nom, message) {
$("#item-container").append("<div><h2>" + nom + "</h2><p>" + message + "</p></div>");
}
 
ajouter("Frédéric", "Allo");
ajouter("Éric", "'Sup");
</script>
 
L'exemple précédent crée deux boîtes et les place dans le div item-container. Si on analyse la fonction ajouter, on voit que le HTML des boîtes est une grande chaîne de caractères. Si la boîte était composée d'une multitude de balises, cette ligne deviendrait complexe et difficile à maintenir.
 
Voici une meilleure approche.
 
Utilisation des templates en JavaSCript
 
Plusieurs librairies sont disponibles pour faire du templating. L'exemple suivant utilise la librairie underscore.js.
 
1 - Insérer les librairies jQuery et underscore.js à votre page Web
 
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/underscore-min.js"></script>
 
2- Créer votre div container
 
<div id="item-container"></div>
 
3- Créer votre template
 
Votre template doit être dans une balise script comme suit :
 
<script type="text/html" id='item-section'>
<div class="item">
<h3> <%= username %> </h3>  
<p> <%= msg %> </p>  
</div>  
</script>
 
4- Utiliser le template au besoin
 
<script>
// Placer le html du template dans une variable 
var itemTemplate = $("#item-section").html();

// Ajout des deux boîtes.
// _ est l'objet de la librairie underscore.js... comme $ est l'objet de jQuery
$("#item-container").append(_.template(itemTemplate,{username : "Arthax", msg : "Hey !"}));
$("#item-container").append(_.template(itemTemplate,{username : "Zothicus", msg : "'Sup"}));
</script>
 
Un des plus gros avantage à utiliser des templates est que l'on a plus besoin d'escaper notre HTML dans des variables. 

Voici le code complet de la démo.

    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="js/underscore-min.js"></script>

    <div id="items"></div>
		
    <script type="text/html" id='item-section'>
        <div class="item">  
            <h3> <%= username %> </h3>  
            <p> <%= msg %> </p>
        </div>
    </script>
		
    <script>
        var itemTemplate = $("#item-section").html();

        $("#items").append(_.template(itemTemplate,{username : "Arthax", msg : "Hey !"}));
        $("#items").append(_.template(itemTemplate,{username : "Zothicus", msg : "'Sup"}));
    </script>
  
J'utilise les templates constamment. 
Ajouter votre commentaire
(facultatif)
(facultatif et non divulgé)
Captcha image
Prenez le nombre affiché et faites moins 1.
 
Blog  

Les articles


Pour envoyer une demande d'assistance à l'enseignant, cliquez ici