web-dev-qa-db-fra.com

Mises en page dans Express 3 et EJS

Dans la version 3 d'Express, certaines fonctionnalités ont été supprimées:

the concept of a "layout" (template engine specific now)
partial() (template engine specific)

Changelog: https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x

La partial() peut être modifiée pour la fonction propre à EJS appelée include, mais quelle est l'alternative pour les mises en page?

node.jsexpressejs
16
artvolk

Il semble que depuis Express 3, la fonctionnalité de disposition soit déléguée à la responsabilité des moteurs de modèles. Vous pouvez utiliser ejs-locals ( https://github.com/RandomEtc/ejs-locals ) pour la présentation. 

Installer les ejs-locals

npm install ejs-locals --save

Utilisez ejs-locals comme moteur d'application dans app.js

var express = require('express');
var engine = require('ejs-locals');
...

app.engine('ejs', engine);
app.set('view engine', 'ejs');

Maintenant, vous pouvez utiliser la mise en page

layout.ejs
<body>
  <%- body %>
</body>

index.ejs
<% layout('layout') -%>

<div class="container">
<div class="jumbotron">
...

Une autre option consiste à utiliser des partiels express ( https://github.com/publicclass/express-partials ). Les deux font la même chose, c'est donc votre choix.

13
Andy

J'ai eu du mal avec cela aussi. J'ai donc mis en place un projet github avec un exemple pour ejs et dustjs.

https://github.com/chovy/express-template-demo

Je ne suis pas sûr que la différence entre un partial et un include, il n'est pas nécessaire de transmettre explicitement les données à un include. Vous ne savez pas pourquoi vous voudriez un partiel.

Mais pour une mise en page, vous spécifiez simplement un bloc comme ceci:

//layout.ejs
<html>
<%- body %>
</html>

//page1.ejs
<% layout('layout') -%>
This is loaded from page 1 and overrides <%- body %> in the layout.ejs.

Si quelqu'un veut ajouter d'autres exemples, il suffit de soumettre une demande d'extraction.

18
chovy

Vous pouvez imiter les mises en page EJS dans Express 2.x avec l'option "inclure". Voir ma réponse ici: 

https://stackoverflow.com/a/12477536/446681

0
Hector Correa