Node.js + Express + Handlebars.js + Teilansichten

Question

Ich versuche, ein einfaches HelloWorld-Projekt mit Node.js | Express mit Hilfe von Handlebars.js als Server-Template-Engine zu erstellen.

Das Problem ist, dass ich keine Beispiele für die Verwendung solcher Kette finden konnte, vor allem mit Mehrfachansicht.

Zum Beispiel würde Ich mag Header Ansicht definieren:

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

Und es auf jeder Seite mit anderen Ansichten verwenden.

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

Ich schätze jeden Link zu dem Tutorial oder (viel besser) Open-Source-Projekt, das ich von lernen kann.

Answer 1

Ich bin derzeit ericf Implementierung der Verwendung von „Lenker-Express“, und finde es ausgezeichnet zu sein:

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

Der Schlüssel ist daran zu erinnern ist, dass auf ausdrücklichen, wie innerhalb der auf der gegenüberliegenden Browser, Lenker wird während der Renderphase der Ansicht aktiviert. Der Client-Code wird dann einfach nur HTML sein, so als ob Sie den Schnurrbart in einem PHP-Kontext verwendet hätten.

Answer 2

Sie müssen Teiltöne verwenden.

Ein gutes Beispiel für die Verwendung von Teiltönen finden Sie unter https://github.com/donpark/hbs/tree/master/examples/partial.

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

Answer 3

Mit 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 die Ordner enthält Ihre partials registrieren:

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

Die partials wird den genauen Namen haben, dass die Datei hat. Sie können auch bestimmte Namen für Ihre partials registrieren, indem Sie:

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

Dann greifen Sie es wie folgt aus:

Voll Beispiel hier: https://github.com/donpark/hbs/tree/master/examples/partial

Answer 4

Ich weiß, das eine lange gefragt worden war, Vor einiger Zeit, aber niemand hat eine Antwort in diesem Post 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 stark vereinfacht erscheint.

In Ihrer server.js-Datei (oder app.js, wo immer Sie den Lenker als View-Engine definiert haben). Je nachdem, was Sie als Ihr npm-Paket verwenden, wie zum Beispiel HBS oder Express-Lenker usw., kann es anders aussehen, aber ähnlich. Hinweis: Ich benutze Express-Lenker in diesem Beispiel.

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 wie folgt aussehen:

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

Und Ihre main.hbs Datei sollte wie folgt aussehen:

Datei: main.hbs

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

Um eine teilweise Sie zu bezeichnen Verwende diese Syntax: {{> partialsNames }}.