web-dev-qa-db-fra.com

Node.js + Express + Handlebars.js + vues partielles

J'essaie de créer un projet HelloWorld simple avec Node.js | Express en utilisant Handlebars.js comme moteur de modèle de serveur.

Le problème est que je n'ai trouvé aucun exemple d'utilisation d'une telle chaîne, en particulier avec plusieurs vues.

Par exemple, je voudrais définir la vue d'en-tête:

<header>
  <span>Hello: {{username}}</span>
</header>

Et utilisez-le dans chaque page avec d'autres vues.

Peut-être que je pense à cette vue de manière erronée, je pensais que cette vue est une sorte de contrôle que je peux réutiliser sur n'importe quelle page à l'intérieur d'une autre vue.

J'apprécie tout lien vers le tutoriel ou (beaucoup mieux) le projet open source dont je peux tirer des leçons.

node.jsexpresshandlebars.jspartial-views
37
Artem Yarulin

Je sais que cela avait été demandé il y a longtemps, mais personne n'a montré de réponse dans ce post. Je vais donc le faire ici. Pour m'assurer que tout le monde est sur la même longueur d'onde, je serai prolixe dans ma réponse. Je m'excuse à l'avance si cela semble trop simpliste.

Dans votre fichier server.js (ou app.js, partout où vous avez défini le guidon comme moteur de vue). En fonction de ce que vous utilisez comme package npm, tel que hbs ou express-guidon, etc., il peut sembler différent, mais similaire à celui-ci. Remarque: j'utilise un guidon express dans cet exemple.

fichier: server.js

...
var express     = require( 'express'),
    hbs         = require( 'express-handlebars' ),
    app         = express();
...

app.engine( 'hbs', hbs( { 
  extname: 'hbs', 
  defaultLayout: 'main', 
  layoutsDir: __dirname + '/views/layouts/',
  partialsDir: __dirname + '/views/partials/'
} ) );

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

...

et votre structure de fichier devrait ressembler à ceci:

| /views/   
|--- /layouts/
|----- main.hbs
|--- /partials/
|----- header.hbs
|----- footer.hbs
|----- ... etc.
|--- index.hbs
| server.js

Et votre fichier main.hbs devrait ressembler à ceci:

fichier: main.hbs

...
{{> header }}
...
<span> various other stuff </span>
...
{{> footer }}

Pour désigner un partiel, vous utilisez cette syntaxe: {{> partialsNames }}.

49
Tristan Isfeld

Utilisation de https://www.npmjs.org/package/hbs | https://github.com/donpark/hbs

Supposons que vous ayez:

+ views
  - index.hbs
  + partials
    - footer.hbs

Vous devez enregistrer le dossier contenant vos partiels:

hbs.registerPartials(__dirname + '/views/partials');

Les partiels auront le nom exact du fichier. Vous pouvez également enregistrer des noms spécifiques pour vos partiels en utilisant:

hbs.registerPartial('myFooter', fs.readFileSync(__dirname + '/views/partials/footer.hbs', 'utf8'));

Ensuite, vous y accédez comme ceci:

First example: {{> footer }} 
Second example: {{> myFooter }}

Exemple complet ici: https://github.com/donpark/hbs/tree/master/examples/partial

37
fmsf

J'utilise actuellement l'implémentation ericf de "guidon-express", et je trouve cela excellent:

https://github.com/ericf/express3-handlebars

La chose clé à retenir est que sur express, contrairement au navigateur, le guidon est activé pendant la phase de rendu de la vue. Le code client finira par être simplement du HTML, comme si vous aviez utilisé la moustache dans un contexte PHP.

3
Andrew Waterman

Vous devez utiliser des partiels.

Voir https://github.com/donpark/hbs/tree/master/examples/partial pour un bon exemple d'utilisation de partiels.

Voici un autre exemple http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers

1
Troy