Un moteur de template simple : MustacheJS !
Lors d’un projet récent, j’ai eu besoin d’afficher dans une page web des données provenant d’un objet JSON de façon simple.
De nos jours, on peut dire qu’il y a le choix dans les frameworks Javascript : Angular, Knockout ou encore React pour ne citer que les plus connus. Ces derniers sont très complets mais il faut du temps pour bien les maitriser.
Pour mon projet, le moteur de template Mustache m’a été conseillé, pour sa simplicité et sa légèreté. En effet, il s’agit d’un “Logic-less template”, c’est-à-dire qu’il se contente d’afficher les données voulues dans le HTML sans aucune conditions (if, while, etc.).
Tout fonctionne à l’aide de “tags”, qui se présentent sous la forme suivante : {{variableName}}. Les accolades représentent les fameuses moustaches !
Il suffit d’insérer ces tags dans du HTML, et d’appeler la fonction suivante pour récupérer le résultat : Mustache.render
Un exemple simple :
var view = {
title: "Robert",
calc: function () {
return 2 + 4;
}
};
var output = Mustache.render("{{title}} a dépensé {{calc}}€", view);
Comme on peut le constater dans l’exemple ci-dessus, l’objet javascript passé en 2e paramètre de la fonction peut contenir des fonctions. Elles seront exécutées et le rendu sera affiché, comme pour les variables simples.
Le résultat obtenu (dans la variable output) peut ensuite être inséré dans la page HTML.
Template
Dans l’exemple précédent, les tags se trouvaient dans une chaine de caractères simple, directement passée en dur à la fonction render.
Mais il est plus intéressant de définir une zone de template dans une page HTML, puis de récupérer le contenu de cette zone en javascript, et de passer ce contenu à la fonction render.
Exemple, avec jQuery :
Page HTML :
<html>
<body onload="loadUser">
<div id="target">
Loading...
</div>
<script id="template" type="x-tmpl-mustache">
<h1>{{ home }}</h1>
Salut {{ name }} !
</script>
</body>
</html>
Javascript :
function loadUser() {
// récupération du template
var template = $('#template').html();
// optionnel, accélère les utilisations futures
Mustache.parse(template);
// objet javascript contenant les données à afficher
var data = {
home: "Accueil",
name: "Roger"
};
// génération du HTML
var rendered = Mustache.render(template, data);
// Insertion du résultat dans la page HTML
$('#target').html(rendered);
}
Des conditions et des boucles
Malgré ce qui est dit dans la présentation de cet article, il est tout de même possible d’utiliser des directives ressemblant aux if et for : elles sont appelées “Sections”.
Il suffit d’ajouter un dièse devant le tag d’ouverture et un slash devant le tag de fermeture, et Mustache déterminera selon le type de variable ce qu’il faut faire :
- S’il s’agit d’un array, chaque élément sera affiché selon le format voulu :
{
"beatles": [
{ "name": "McCartney" },
{ "name": "Lennon" },
{ "name": "Harrisson" }
]
}
Template:
{{#beatles}}
<b>{{name}}</b>
{{/beatles}}
Affichera :
<b>McCartney</b>
<b>Lennon</b>
<b>Harrisson</b>
- S'il s'agit d'une variable, le contenu entre les 2 tags ne sera affiché que si cette variable est "vraie" (c'est-à-dire non-nulle, defined, true ou un array non-vide) :
{
"estAffichable": false
}
Template:
Ce texte est visible
{{#estAffichable}}
Ce texte est visible si la variable ‘estAffichable’ est vraie !
{{/estAffichable}}
Affichera:
Ce texte est visible
Et bien plus !
J'ai survolé les principales possibilités de ce moteur de template, mais sachez qu’il en existe d’autres :
- On peut définir des fonctions permettant d’appliquer un formatage du contenu entre les 2 tags
- On peut utiliser des partials
- Les templates peuvent être “pre-parsed” et “cached” par souci d’optimisation
Tout cela est très bien documenté sur la page dédiée à la partie “Javascript” de Mustach (car oui, ce framework est multilingue, comme vous pouvez le voir sur la page principale du projet).
Commentaires