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.
J'utilise les templates constamment.
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>
Ajouter votre commentaire
