Node.js + Express + Handlebars.js + частичные виды

Я пытаюсь создать простой проект HelloWorld с Node.js | Express, используя Handlebars.js в качестве механизма шаблона сервера.

Проблема в том, что я не мог найти примеров использования такой цепочки, особенно с несколькими представлениями.

Например, я хотел бы определить вид заголовка:

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

И используйте его на каждой странице с другими видами.

Возможно, я неправильно думаю об этих представлениях, я думал, что это вид управления, который я могу повторно использовать на любой странице в любом другом представлении.

Я ценю любую ссылку на учебник или (гораздо лучший) проект с открытым исходным кодом, из которого я могу отказаться.

Ответы

Ответ 1

Использование https://www.npmjs.org/package/hbs | https://github.com/donpark/hbs

Предположим, что у вас есть:

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

Вам необходимо зарегистрировать, какая папка содержит ваши частичные файлы:

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

Частичные будут иметь точное имя, которое имеет файл. Вы также можете зарегистрировать определенные имена для своих партиций, используя:

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

Затем вы получите доступ к нему следующим образом:

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

Полный пример здесь: https://github.com/donpark/hbs/tree/master/examples/partial

Ответ 2

Я знаю, что это было задано давно, но никто не ответил на этот пост. Поэтому я сделаю это здесь. Чтобы все были на одной странице, я буду подробным в своем ответе. Я заранее извиняюсь, если это кажется слишком упрощенным.

В файле server.js(или app.js, где вы определили рули в качестве механизма просмотра). В зависимости от того, что вы используете в качестве пакета npm, например hbs или express-handlebars и т.д., Он может выглядеть по-другому, но похож на этот. Примечание. В этом примере я использую символы express-handlebars.

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

...

и ваша файловая структура должна выглядеть примерно так:

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

И ваш файл main.hbs должен выглядеть так:

file: main.hbs

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

Чтобы обозначить частичный, вы используете этот синтаксис: {{> partialsNames }}.

Ответ 3

В настоящее время я использую ericf для реализации "handlebars-express" и считаю, что это отлично:

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

Главное, что нужно помнить, - это то, что в выражении, в отличие от браузера, ручки активируются во время фазы визуализации. Клиентский код в конечном итоге будет просто простым HTML, как если бы вы использовали усы в контексте PHP.