Node.js - 6.9 Utiliser Handlebars comme moteur de vues

Handlebars est un moteur de modèles qui utilise du HTML normal, avec une syntaxe propre pour afficher des données. Express ne l'intègre pas par défaut : il faut installer le paquet express-handlebars, puis l'enregistrer. Cette leçon montre comment faire, et comment afficher une valeur.

Installer et enregistrer le moteur

Installez le paquet express-handlebars avec npm. Dans le fichier principal, importez-le avec require, puis enregistrez-le avec app.engine() sous le nom hbs. Ensuite, app.set() indique à Express d'utiliser ce moteur pour les vues.

La vidéo ajoute une petite configuration supplémentaire, pour qu'Express ne cherche pas de layout par défaut. Reprenez-la telle qu'elle est présentée. L'API du paquet peut aussi varier selon les versions : la documentation officielle fait foi.

const expressHbs = require('express-handlebars');

app.engine('hbs', expressHbs());
app.set('view engine', 'hbs');

Créer une vue et afficher une valeur

Les fichiers de vue portent l'extension hbs. Le fichier 404.hbs reprend le HTML de la page d'erreur, sans version minimale, puisque Handlebars utilise du HTML complet. Une valeur transmise par le code s'affiche avec des doubles accolades, par exemple le titre de la page.

<title>{{pageTitle}}</title>

Transmettre les données à la vue

La façon de transmettre les données ne change pas avec le moteur. On passe un objet contenant des paires clé valeur. La clé pageTitle, par exemple, permet ensuite d'afficher la valeur dans le modèle.

En résumé

Handlebars est un moteur de modèles qui utilise du HTML normal. Il faut installer express-handlebars, l'enregistrer comme moteur et définir la valeur par défaut. Les doubles accolades affichent une donnée transmise à la vue.

Points clés

• express-handlebars n'est pas installé avec Express et doit être ajouté avec npm.
• app.engine() enregistre le moteur sous un nom, ici hbs.
• app.set('view engine', 'hbs') active ce moteur pour les vues.
• Les doubles accolades affichent une valeur transmise à la vue.
• Les données sont transmises de la même façon, quel que soit le moteur.

Questions fréquentes

Handlebars permet-il les conditions et les boucles ?

Oui. La vidéo invite à consulter la documentation officielle pour apprendre leur syntaxe.

Pourquoi utiliser un moteur de vues ?

Il permet d'écrire du HTML avec des emplacements dynamiques, au lieu d'assembler le HTML à la main dans le JavaScript.

Le nom hbs est-il obligatoire ?

Non, le nom est au choix. Il doit être identique dans app.engine() et dans app.set(), et l'extension des fichiers doit suivre ce nom.