Node.js - 6.5 Transmettre des données à une vue Pug

Une page statique ne sert pas à grand-chose si elle n'affiche pas les données de l'application. Cette leçon montre comment passer des données depuis une route Express vers un modèle Pug. Elle explique aussi comment afficher une valeur simple dans la page.

Passer des données à la vue

La méthode render accepte un second argument : un objet JavaScript. Chaque clé de cet objet devient une variable utilisable dans le modèle. La clé prods peut par exemple contenir le tableau des produits.

Une même route peut aussi transmettre d'autres champs, comme le titre du document. Il suffit de les ajouter dans le même objet.

res.render('shop', { prods: products, docTitle: 'Shop' });

Afficher une valeur dans le modèle

Dans Pug, la syntaxe #{...} insère une valeur. Entre les accolades, on écrit le nom de n'importe quelle clé passée à la vue. Ici, la valeur docTitle est insérée dans la balise title.

Le texte affiché dépend donc de la route. Ce principe permet de réutiliser le même modèle pour plusieurs pages, avec des titres différents.

title #{docTitle}

Préparer la liste de produits

Les données d'une liste suivent le même principe. La route transmet le tableau, et le modèle le parcourt pour afficher chaque élément. La boucle sera vue dans la leçon suivante.

Après une modification dans app.js, il faut redémarrer le serveur, car ce fichier fait partie du code côté serveur. Les modèles, eux, sont relus à chaque requête.

En résumé

La méthode render transmet un objet de données à la vue. Chaque clé devient une variable accessible dans le modèle Pug. La syntaxe #{...} affiche la valeur, et la boucle permettra ensuite de parcourir une liste.

Points clés

• Le deuxième argument de render transmet des données à la vue.
• Chaque clé de l'objet devient une variable du modèle.
• La syntaxe #{...} insère une valeur dans le HTML généré.
• Le même modèle peut afficher des titres différents selon la route.
• Un changement dans app.js nécessite de redémarrer le serveur.

Questions fréquentes

Quel est le rôle du second argument de render ?

Il transmet les données à la vue sous forme d'objet. Chaque clé devient une variable utilisable dans le modèle.

Comment afficher une variable dans un modèle Pug ?

On l'écrit entre accolades précédées d'un dièse, comme #{docTitle}. La valeur de la clé est alors insérée dans la page.

Faut-il redémarrer le serveur après une modification de modèle ?

Non, seulement après une modification du code de app.js. Un modèle est relu à chaque requête.