Node.js + Express + Handlebars.js + Teilansichten

Ich versuche, ein einfaches HelloWorld-Projekt mit Knoten.js|Express-mit Handlebars.js als server-template-engine.

Das problem ist, dass ich nicht finden konnte alle Beispiele der Verwendung eines solchen Kette, insbesondere mit mehreren anzeigen.

Zum Beispiel würde ich gerne definieren header-Ansicht:

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

Und verwenden Sie es in jede Seite mit anderen Ansichten.

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

Ich freue mich über jeden link zu der Anleitung oder (viel besser) open-source-Projekt, ich kann lear aus.

InformationsquelleAutor der Frage user2351982 | 2013-05-05

  1. 32

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

    Nehmen wir an, Sie haben:

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

    Müssen Sie registrieren, in welchem Ordner Ihre Teiltöne:

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

    Werden die Teiltöne haben den genauen Namen, den die Datei hat. Sie können sich auch registrieren spezifischen Namen für Ihre partialtöne mit:

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

    Du dann wie diese:

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

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

    InformationsquelleAutor der Antwort fmsf

  2. 21

    Ich weiß, das war gebeten worden, vor langer Zeit, aber niemand hat gezeigt, dass eine Antwort in diesem post. Also werde ich das hier tun. Um sicherzustellen, dass jeder ist auf der gleichen Seite, werde ich ausführlich in meiner Antwort. Ich entschuldige mich im Voraus, wenn es scheint, allzu simpel.

    In Ihrem server.js Datei (oder app.js überall, wo Sie definiert LENKER als Ihre Ansicht-engine). Je nachdem, was Sie verwenden, da Ihre npm-Paket, wie hbs oder express-LENKER usw. es kann unterschiedlich Aussehen, aber ähnlich wie diese. Hinweis: ich bin mit der 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 die Dateistruktur sollte wie folgt Aussehen:

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

    Und Ihr Haupt.hbs-Datei sollte wie folgt Aussehen:

    Datei: main.hbs

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

    Bezeichnen eine partielle Sie diese syntax verwenden: {{> partialsNames }}.

    InformationsquelleAutor der Antwort Tristan Isfeld

  3. 1

    Ich bin derzeit mit ericf Umsetzung von "LENKER-express", und finde es hervorragend:

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

    Die wichtige Sache zu erinnern ist, dass, auf ausdrücklichen, im Gegensatz zu den im browser, LENKER aktiviert wird, während die Ansicht render-phase. Der client-code wird am Ende nicht einfach nur HTML, als ob Sie Sie genutzt hatten, Schnurrbart, in einem PHP-Kontext.

    InformationsquelleAutor der Antwort Andrew Waterman

  4. 1

    Müssen Sie die Verwendung von partials.

    Sehen https://github.com/donpark/hbs/tree/master/examples/partial für 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

    InformationsquelleAutor der Antwort Troy

Schreibe einen Kommentar