Node.js - 6.6 Convertir les pages HTML en modèles Pug

Les pages HTML créées précédemment peuvent devenir des modèles Pug. Cette leçon convertit la page d'ajout de produit, puis affiche des données dynamiques. Elle montre aussi une boucle pour afficher une liste, et une condition pour le cas où la liste est vide.

Convertir la page d'ajout de produit

Créez un fichier Pug dans le dossier views à partir d'un squelette HTML5. Copiez-y le formulaire et la navigation de la page HTML. Adaptez ensuite la syntaxe : les balises fermantes disparaissent, et l'imbrication suit l'indentation.

Les classes s'écrivent avec un point, et les identifiants avec un dièse. Un élément main avec l'identifiant main se note donc main#main. Le reste de la page se convertit de la même façon.

Parcourir une liste avec each

La syntaxe each produit in prods répète un bloc pour chaque élément du tableau. Dans ce bloc, la variable produit donne accès aux champs de l'élément courant, comme produit.title.

Le bloc entier, de l'article jusqu'au titre, est indenté sous la boucle. Il est ainsi répété pour chaque produit.

main
  each produit in prods
    article.product
      h1= produit.title

Gérer le cas sans produit

Avant d'afficher la liste, une condition vérifie que le tableau contient au moins un élément, avec prods.length > 0. Dans le cas contraire, un titre indique qu'aucun produit n'existe pour le moment.

Une erreur fréquente consiste à écrire le nom de la clé de travers, par exemple prod au lieu de prods. Le modèle ne trouve alors pas les données. Après une simple modification de modèle, il n'est pas nécessaire de redémarrer le serveur.

En résumé

Une page HTML devient un modèle Pug en gardant sa structure et en adaptant la syntaxe. La boucle each affiche une liste de données. Une condition gère le cas où la liste est vide.

Points clés

• Le formulaire et la navigation se convertissent en Pug sans balises fermantes.
• Les classes s'écrivent avec un point et les identifiants avec un dièse.
• La boucle each répète un bloc pour chaque élément du tableau.
• La condition prods.length > 0 évite d'afficher une liste vide.
• Une modification de modèle ne demande pas de redémarrer le serveur.

Questions fréquentes

Pourquoi garder les fichiers HTML d'origine ?

La leçon conseille de les garder. Cela permet de passer plus facilement à un autre moteur de modèles plus tard.

Que se passe-t-il si le nom de la clé est faux ?

Le modèle ne trouve pas les données attendues, et la page n'affiche pas la liste. Il faut vérifier que le nom est identique dans la route et le modèle.

Comment afficher un message quand la liste est vide ?

On place la boucle dans une condition if prods.length > 0, et on prévoit un autre bloc, avec un titre, pour le cas contraire.