-Использование рулей-помощников с экспресс-генератором

Зарядите свой проект Express / Handlebars с помощью помощников по рулям

Один из моих любимых движков просмотра - Handlebars. Использовать Handlebars с NodeJS довольно просто, особенно с Express Generator. Но сам Handlebars довольно ограничен и прост. Handlebars Helpers добавляет 188 дополнительных помощников, что значительно упрощает создание шаблонов с помощью Handlebars.

1. Создайте приложение Express с помощью Express Generator.

Установите Express Generator глобально, используя

npm i -g express-generator

Используйте Express Generator для создания приложения Express с помощью этой команды:

express someAppName --view=hbs

Это создает базовое приложение Express с поддержкой Handlebars. someAppName - это пример имени проекта. Вы можете использовать собственное название проекта. Express Generator создает папку с названием проекта и генерирует все необходимые файлы.

Перейдите в папку проекта и установите рули-хелперы и экспресс-рули.

npm install --save handlebars-helpers express-handlebars

2. Импортные рули-хелперы и экспресс-рули.

В нашем app.js файле импортируем рули-хелперы и экспресс-рули. Создайте экземпляр помощников.

const hbs = require('express-handlebars');
const hbshelpers = require('handlebars-helpers');
const multihelpers = hbshelpers();

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

//Commment out => app.set('views', path.join(__dirname, 'views'));
app.engine(
  "hbs",
  hbs({
    helpers: multihelpers,
    partialsDir: ["views/partials"],
    extname: ".hbs",
    layoutsDir: "views",
    defaultLayout: "layout"
  })
);

Полный пример app.js:

3. Тестовые рули-помощники

Теперь для тестирования мы можем использовать индексный маршрут. Просто передайте переменную в представление, и мы будем использовать ее для условного рендеринга некоторого HTML с помощью handlebars-helpers. Отредактируйте файл маршрута индекса в /routes/index.js.

Например, мы можем использовать помощник is. Этот помощник принимает два аргумента, и если эти два аргумента равны, блок будет отрисован.

{{#is someVariable 'example'}}
THIS WILL BE RENDERED
{{/is}}

В /views/index.hbs наш код теперь должен выглядеть так

Вот и все! Теперь вы можете использовать рули-помощники с Express Generator! Для получения дополнительных помощников посетите здесь.