it-swarm.com.de

Node.js + Express + Handlebars.js + Teilansichten

Ich versuche, ein einfaches HelloWorld-Projekt mit Node.js | Express zu erstellen, wobei Handlebars.js als Servervorlagen-Engine verwendet wird.

Das Problem ist, dass ich keine Beispiele für die Verwendung einer solchen Kette finden konnte, insbesondere bei mehreren Ansichten.

Zum Beispiel möchte ich die Kopfzeilenansicht definieren:

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

Und verwenden Sie es in jeder Seite mit anderen Ansichten.

Vielleicht denke ich falsch über diese Ansichten nach. Ich dachte, diese Ansicht ist eine Art Kontrolle, die ich auf jeder Seite in jeder anderen Ansicht wiederverwenden kann.

Ich freue mich über jeden Link zum Tutorial oder zu einem (viel besseren) Open Source-Projekt, von dem ich lernen kann.

37
Artem Yarulin

Ich weiß, dass dies vor langer Zeit gefragt wurde, aber niemand hat eine Antwort in diesem Beitrag gezeigt. Also werde ich das hier tun. Um sicherzustellen, dass alle auf der gleichen Seite sind, werde ich in meiner Antwort ausführlich sein. Ich entschuldige mich im Voraus, wenn es zu simpel erscheint.

In Ihrer server.js-Datei (oder app.js, wo immer Sie den Lenker als Ansichtsmodul definiert haben). Abhängig davon, was Sie als npm-Paket verwenden, wie z. B. hbs oder Express-Lenker usw., sieht es möglicherweise anders aus, ist aber ähnlich. Hinweis: In diesem Beispiel verwende ich Express-Lenker.

Datei: 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' );

...

und Ihre Dateistruktur sollte ungefähr so ​​aussehen:

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

Und Ihre main.hbs-Datei sollte so aussehen:

Datei: main.hbs

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

Um einen Teil zu kennzeichnen, verwenden Sie diese Syntax: {{> partialsNames }}.

49
Tristan Isfeld

Verwenden Sie https://www.npmjs.org/package/hbs | https://github.com/donpark/hbs

Nehmen wir an, Sie haben:

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

Sie müssen registrieren, welcher Ordner Ihre Partials enthält:

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

Die Partials haben genau den Namen, den die Datei hat. Sie können auch bestimmte Namen für Ihre Partials registrieren, indem Sie Folgendes verwenden:

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

Dann greifen Sie wie folgt darauf zu:

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

Vollständiges Beispiel hier: https://github.com/donpark/hbs/tree/master/examples/partial

37
fmsf

Ich verwende derzeit die ericf-Implementierung von "handlebars-express" und finde es hervorragend:

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

Der Schlüssel zum Erinnern ist, dass bei Express im Gegensatz zum Browser der Lenker während der Rendering-Phase der Ansicht aktiviert wird. Der Client-Code wird einfach nur HTML sein, als ob Sie Schnurrbart in einem PHP Kontext verwendet hätten.

3
Andrew Waterman

Sie müssen Partials verwenden.

Unter https://github.com/donpark/hbs/tree/master/examples/partial finden Sie ein gutes Beispiel für die Verwendung von Partials.

Hier ist ein weiteres Beispiel http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers

1
Troy