Node.js + Express + Handlebars.js + częściowe widoki

Question

Próbuję zrobić prosty projekt HelloWorld z Node.js | Express, używając Handlebars.js jako silnika szablonu serwera.

Problem polega na tym, że nie mogłem znaleźć żadnych przykładów użycia takiego łańcucha, szczególnie z wieloma widokami.

Na przykład chciałbym zdefiniować widok nagłówka:

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

i używać go w każdej stronie z innymi widokami.

Być może myślę o tych poglądach w niewłaściwy sposób, myślałem, że widok jest rodzajem kontroli, którą mogę ponownie wykorzystać na dowolnej stronie w jakimkolwiek innym widoku.

Doceniam każdy link do samouczka lub (o wiele lepiej) projektu open source, z którego mogę korzystać.

Answer 1

obecnie używam realizację ericf dotyczącą „kierownica-express” i odkrywa, że ​​jest doskonała:

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

Kluczową rzeczą do zapamiętania jest to, że na express, w przeciwieństwie do obrębie przeglądarka, kierownica zostanie aktywowana podczas fazy renderowania widoku. Kod klienta zakończy się zwykłym HTML, tak jakbyś używał wąsy w kontekście PHP.

Answer 2

Musisz użyć partials.

Zobacz przykład użycia częściowych.

Oto kolejny przykład http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers

Answer 3

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

Załóżmy masz:

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

Musisz się zarejestrować który folder zawiera swoje partials:

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

W partials będzie mieć dokładną nazwę, że plik. Można również zarejestrować konkretnych nazw dla swoich podszablonów za pomocą:

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

Wtedy masz dostęp to tak:

Pełny przykład tutaj: https://github.com/donpark/hbs/tree/master/examples/partial

Answer 4

Znam ten został poproszony długa czas temu, ale nikt nie pokazał odpowiedzi w tym poście. Więc zrobię to tutaj. Aby upewnić się, że wszyscy znajdują się na tej samej stronie, będę odpowiadać w mojej odpowiedzi. Z góry przepraszam, jeśli wydaje się zbyt uproszczona.

W swoim pliku server.js (lub app.js, gdziekolwiek zdefiniowano kierownicę jako mechanizm wyświetlania). W zależności od tego, co używasz jako pakiet npm, np. Hbs lub kierownica ekspresowa, może wyglądać inaczej, ale podobnie do tego. Uwaga: w tym przykładzie używam wyrazowych kierownic.

plik: serwer.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'); 

... 

a struktura plików powinien wyglądać mniej więcej tak:

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

I plik main.hbs powinna wyglądać następująco:

Plik: main.hbs

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

Aby wskazać częściową osobę użyj tej składni: {{> partialsNames }}.