Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. JavaScript pour l'intégrateur web
  3. Le moteur de rendu Mustache
Extrait - JavaScript pour l'intégrateur web Créer des sites web dynamiques et interactifs
Extraits du livre
JavaScript pour l'intégrateur web Créer des sites web dynamiques et interactifs
2 avis
Revenir à la page d'achat du livre

Le moteur de rendu Mustache

Présentation du moteur de rendu Mustache

Mustache est une spécification qui permet de créer des templates. Ce n’est pas un moteur de templates, c’est un moteur de rendu, un moteur de vues. Voici son URL : http://mustache.github.io

Autre point important, Mustache permet de créer des templates sans logique, il est dit logic-less en anglais. Cela veut dire que nous ne pourrons pas utiliser des fonctions de condition comme le if(), ni des boucles comme while() ou for().

Pour concevoir nos pages, nous allons avoir besoin de trois composants :

  • un template conçu avec les balises spécifiques de Mustache,

  • des données qui peuvent être stockées dans le fichier .html ou à l’extérieur de celui-ci,

  • un moteur de template.

images/C07-011.png

Le premier composant est constitué par les balises. Avec les balises spécifiques de Mustache, nous allons concevoir des templates. Dans le template, nous indiquerons des emplacements qui seront ensuite remplacés par les données à afficher. La syntaxe de Mustache utilise des accolades {{...}} pour indiquer le nom des éléments qui seront ensuite remplacés par les données. Par exemple, si nous souhaitons afficher une destination de voyage provenant d’une liste, la syntaxe pourrait être la suivante : {{destination}}.

Le deuxième composant nécessaire...

Les données à afficher

1. La source des données

Les données doivent être disponibles dans un format qui soit en adéquation avec le moteur de rendu choisi. Si nous choisissons un moteur de rendu en JavaScript, les données pourront être aussi au format JavaScript. Nous avons deux possibilités :

  • Les données pourront être des objets JavaScript qui seront insérés dans le fichier .html ou .js.

  • Les données pourront être au format JSON et être placées dans un fichier .json externe.

2. Le format JSON

Le premier format des sources de données que nous pouvons utiliser est le format JSON. C’est un format qui a été créé par Douglas Crockford à partir de 2002. Il permet de stocker facilement et rapidement des données aisément accessibles par de très nombreux langages. C’est donc un format d’échange de données avant tout.

Le format JSON comporte deux composants : un nom (ou une clé) et une valeur. Les données peuvent être de trois types seulement :

  • des objets,

  • des tableaux,

  • des valeurs de type objet, tableau, booléen, nombre, chaîne de caractères ou null.

Le nom des données et les valeurs, sauf les valeurs numériques, sont entre guillemets "..." et sont séparés par le caractère deux-points :.

Attention, vous ne pouvez pas utiliser des simples quotes ’...’.

Toutes les données sont placées entre accolades et les couples nom/valeur sont séparés par une virgule ,. Pour le dernier couple, la virgule n’est pas requise.

Voici un exemple simple :


{ 
    "prenom": "Christophe", 
    "nom": "Aubry", 
    "adresse": { 
        "numero": 12, 
        "rue": "avenue des Plantes", 
        "ville": "Nantes" 
    } 
}
 

Analysons cette structure simple :

  • Toutes les données sont placées dans un couple d’accolades.

  • Les deux premières lignes sont des couples nom/valeur classiques. Le nom et la valeur sont séparés par le caractère deux-points...

Installer le fichier mustache.js

Pour exploiter l’utilisation des templates avec Mustache, il faut dans un premier temps télécharger son script, afin de l’utiliser dans tous les exemples à venir.

 Allez sur la page du site de Mustache : http://mustache.github.io

images/C07-005.png

 Dans la liste des langages disponibles, cliquez sur le lien JavaScript.

 Dans la liste des fichiers disponibles, téléchargez mustache.js.

images/C07-006.png

 Dans le dossier de votre site, enregistrez le fichier mustache.js à la racine de ce dossier ou dans un dossier nommé javascript ou js, comme vous le souhaitez.

 Ensuite, dans chaque fichier HTML, nous devrons faire le lien vers le fichier mustache.js :


<script src="mustache.js"></script>
 

Afficher des données internes simples

1. La structure de la page

Dans ce premier exemple, nous allons créer un template avec des données très simples. Nous allons avoir besoin de ces deux constituants principaux :

  • des données internes simples au format JSON,

  • un template au format Mustache.

Nous allons exécuter le rendu des données et les afficher dans un élément HTML de la page.

Voici le code de ce premier exemple :


<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
    </head> 
    <body> 
        <div id="conteneur"></div> 
        <script src="mustache.js"></script> 
        <script> 
            // Fournir les données internes en JSON 
            var chienJSON = {"Nom":"Raja","Couleur":"Brun","Race": 
"Labrador"} ; 
            // Définir le template 
            var leTemplate = "<h2>Nom du chien : {{Nom}}.</h2><p>Couleur...

Afficher des données internes répétitives

1. La structure des données JSON

Dans ce deuxième exemple, nous allons utiliser des données répétitives. Nous reprenons l’exemple précédent, mais cette fois nous avons plusieurs chiens.

Voici les données indiquées au format JSON :


{"chiens":[ 
    {"Nom":"Raja","Couleur":"Brun","Race":"Labrador"}, 
    {"Nom":"Lord","Couleur":"Beige","Race":"Beagle"}, 
    {"Nom":"Yuky","Couleur":"Noir","Race":"Caniche"} 
    ] 
}
 

Le premier élément "chiens" est un tableau qui contient toutes ses données entre crochets [...]. Chaque donnée, chaque chien est défini entre accolades {...}. Pour chaque chien, nous retrouvons les couples nom/valeur.

2. La structure de la page

La structure de la page est très similaire à celle précédemment utilisée :


<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
    </head> ...

Afficher des données internes et un template séparé

Dans les deux exemples précédents, nous avons créé le template directement dans une variable. Cela peut être utilisé pour des projets ayant un design simple. Mais dès lors que le design est plus complexe, cette solution n’est pas très pratique.

Dans cet exemple, nous allons reprendre les données répétitives, nous allons "sortir" le template de la variable et le créer dans un élément <script> pour que cet élément ne soit pas affiché dans la fenêtre du navigateur, comme le serait un élément <div> par exemple.

Voici la structure de la page :


<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
    </head> 
    <body> 
        <div id="conteneur"></div> 
        <script id="template" type="x-tmpl-mustache"> 
            {{#chiens}} 
                <h2>Nom du chien : {{Nom}}.</h2> 
          ...

Décomposer le template en blocs

1. Les objectifs

Dans l’exemple précédent, nous avons placé le template dans un élément <script> séparé, afin de mieux séparer les composants de la structure de la page. Mais nous pouvons aller plus loin encore, en décomposant le template en blocs fonctionnels. Dans la terminologie de Mustache, les blocs de template séparés du template principal s’appellent des partials.

Il se peut que votre template soit constitué de nombreuses parties fonctionnelles distinctes. Dans ce cas, il peut vite devenir confus et verbeux. Il est alors préférable de le décomposer en plusieurs blocs séparés, chaque bloc s’occupant d’une fonctionnalité précise.

Dans notre exemple, nous allons séparer la partie affichant la race des chiens dans un bloc distinct. Nous aurons ainsi deux templates, le premier gérant l’affichage du nom et de la couleur du chien, le deuxième affichant la race du chien. Bien sûr, cet exemple reste simple, à vous d’adapter cette démarche à vos projets plus complexes.

2. Les templates

Dans le template initial, nous voulons sortir la partie gérant la race des chiens.

Voici le template initial :


<script id="template" type="x-tmpl-mustache"> 
    {{#chiens}} 
        <h2>Nom du chien : {{Nom}}.</h2> 
        <p>Couleur...

Afficher des données extérieures et utiliser un template séparé

1. Les objectifs

Dans ce dernier exemple, nous allons concevoir un template séparé dans un élément HTML <script> qui utilisera des données extérieures au format JSON.

Attention, dans cet exemple, nous allons à nouveau importer des données extérieures au fichier .html avec le protocole HTTP, vous devez donc utiliser un serveur web local, de type MAMP, WAMP, XAMPP, selon votre convenance.

2. Les données extérieures

Toutes les données de cet exemple sont dans un fichier articles.json :


{     
    "articles":[ 
        { 
            "titre": "Lorem Ipsum", 
            "contenu": "Aenean lacinia bibendum nulla sed...", 
            "date": "08/06/2018", 
            "auteur": "Christophe" 
        }, 
        { 
            "titre": "Cursus Malesuada Amet", 
            "contenu": "Praesent commodo cursus magna...", 
            "date": "11/06/2018", 
            "auteur": "Christine" 
        }, 
        { 
            "titre": "Maecenas faucibus", 
            "contenu": "Vestibulum id ligula porta felis...", 
            "date": "18/06/2018", 
            "auteur": "Mathis" 
        } 
    ] 
}
 

L’élément premier est la donnée nommée "articles". C’est un type tableau qui contient ses données entre les deux crochets [...]. Chaque entrée du tableau est placée entre accolades {...} et possède les mêmes couples nom/valeur :...