Node.js - 6.10 Afficher des données avec Handlebars

Cette leçon transforme une page HTML en modèle Handlebars. Le moteur de vues remplace les expressions entre doubles accolades par des valeurs venant du code Express. Elle montre aussi la différence de philosophie avec Pug : la logique reste dans Express, et le modèle reste simple.

Remplacer le HTML par des expressions

La page des produits est copiée dans un nouveau fichier .hbs. Le titre de la page devient une expression entre doubles accolades, transmise par Express. Ce fichier n'utilise pas de mise en page pour l'instant.

Le lien actif de la navigation est ajouté directement, car cette page n'a pas besoin de condition.

Afficher un bloc avec if

Dans Handlebars, un bloc commence par un dièse, comme #if, et se termine par une balise de fermeture avec un slash. Le modèle ne sait pas comparer des valeurs : il faut calculer dans le code Express si la liste contient des produits, puis transmettre le résultat vrai ou faux.

{{#if hasProduct}}
  ...
{{/if}}

Parcourir la liste avec each

Le bloc each parcourt un tableau et répète son contenu pour chaque élément. Le mot-clé this désigne l'élément de l'itération en cours. Chaque produit est un objet JavaScript qui possède une clé de titre.

Cette philosophie garde les modèles légers, car toute la logique se prépare dans le code Express.

{{#each products}}
  <h2>{{this.title}}</h2>
{{/each}}

En résumé

Handlebars remplace les valeurs entre doubles accolades, et gère les conditions et les boucles avec des blocs. La logique se prépare dans le code Express, et le modèle sert seulement à afficher. Cette différence demande de s'habituer à une autre façon de travailler.

Points clés

• Les expressions entre doubles accolades affichent des valeurs transmises par Express.
• Un bloc if affiche son contenu selon une valeur vraie ou fausse.
• Un bloc each répète son contenu pour chaque élément d'un tableau.
• Le mot-clé this désigne l'élément courant de la boucle.
• La logique se prépare dans le code Express, pour garder des modèles légers.

Questions fréquentes

Peut-on écrire une comparaison complète dans le modèle ?

Non, Handlebars ne permet pas de comparaisons dans le modèle. La vidéo calcule donc le résultat dans Express.

Que représente this dans un bloc each ?

C'est l'élément du tableau pour l'itération en cours.

Pourquoi les modèles doivent-ils rester légers ?

La logique reste dans le code Express, et le modèle sert seulement à afficher les données.