Представления и движок представлений Handlebars¶

Как правило, приложения Express для определения визуального интерфейса использует не стандартные файлы html, а специальные сущности - представления, из которых затем создаются html-файлы. Преимуществом представлений является то, что мы можем определять в них некоторые шаблоны, вместо которых затем вставляется какое-то динамическое содержимое с помощью кода javascript.

Управляет представлениями специальный компонент - движок представлений (view engine), который также называют движок шаблонов (templte engine). Вообще движков представлений в Express довольно много: Pug, Jade, Dust, Nunjucks, EJS, Handlebars и другие. Вопрос выбора движка представлений - в основном вопрос предпочтений, все они предоставляют схожую функциональность, различаясь лишь в каких-то деталях.

Для работы с движками представлений в Express определено ряд глобальных настроек, которые мы можем установить. Прежде всего это настройка view engine, которая устанавливает используемый движок предствлений, и views, которая устанавливает путь к папке с представлениями внутри проекта (если этот параметр не установлен, то по умолчанию используется папка с именем views).

Для начала рассмотрим работу с представлениями на основе движка Handlebars или сокращенно hbs.

Для работы с представлениями установим пакет hbs в проект с помощью команды

1	`npm install hbs --save`

Для хранения представлений определим в проекте папку views. Затем в нее добавим новый файл contact.hbs. hbs - это расширение по умолчанию для представлений, которые обрабатываются движком Handlebars.

Определим в файле contact.hbs простейший html-код:

<!DOCTYPE html>
<html>
    <head>
        <title>Контакты</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>Контакты</h1>
        <p>Электронный адрес: [email protected]</p>
    </body>
    <html></html>
</html>

Представление выглядит как обычная веб-страница, однако на самом деле это уже не html-страница, просто пока она не содержит никаких шаблонов.

Изменим файл приложения app.js:

const express = require('express');

const app = express();

app.set('view engine', 'hbs');

app.use('/contact', function (request, response) {
    response.render('contact.hbs');
});
app.use('/', function (request, response) {
    response.send('Главная страница');
});
app.listen(3000);

Чтобы установить Handlebars в качестве движка представлений в Express, вызывается функция:

app.set('view engine', 'hbs');

Для маршрута /contact используется функция обработчика, которая производит рендеринг представления contact.hbs с помощью функции response.render(). Эта функция на основе представления создает страницу html, которая отправляется клиенту.

Запустим приложение и обратимся в веб-браузере с запросом http://localhost:3000/contact:

4.6.png

Модель представления¶

Одним из преимуществ шаблонов является то, что мы можем передавать в представления на место шаблонов модели представления - специальные объекты, данные которые использует движок представлений для рендеринга.

Так, изменим файл app.js следующим образом:

const express = require('express');

const app = express();

app.set('view engine', 'hbs');

app.use('/contact', function (request, response) {
    response.render('contact.hbs', {
        title: 'Мои контакты',
        email: '[email protected]',
        phone: '+1234567890',
    });
});
app.use('/', function (request, response) {
    response.send('Главная страница');
});
app.listen(3000);

Теперь в качестве второго параметра в функцию response.render() передается специальный объект с тремя свойствами.

Далее изменим код представления contact.hbs:

<!DOCTYPE html>
<html>
    <head>
        <title>{{title}}</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>{{title}}</h1>
        <p>Электронный адрес: {{email}}</p>
        <p>Телефон: {{phone}}</p>
    </body>
    <html></html>
</html>

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

Перезапустим приложение и вновь обратимся по тому же адресу:

4.7.png

Рассмотрим более сложный случай, пусть в представление передается массив:

const express = require('express');

const app = express();
app.set('view engine', 'hbs');

app.use('/contact', function (request, response) {
    response.render('contact.hbs', {
        title: 'Мои контакты',
        emailsVisible: true,
        emails: ['[email protected]', '[email protected]'],
        phone: '+1234567890',
    });
});

app.use('/', function (request, response) {
    response.send('Главная страница');
});
app.listen(3000);

Для вывода данных изменим представление contact.hbs:

<!DOCTYPE html>
<html>
    <head>
        <title>{{title}}</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>{{title}}</h1>

        {{#if emailsVisible}}
        <h3>Электронные адреса</h3>
        <ul>
            {{#each emails}}
            <li>{{this}}</li>
            {{/each}}
        </ul>
        {{/if}}
        <p>Телефон: {{phone}}</p>
    </body>
    <html></html>
</html>

Выражение типа

{{#if emailsVisible}}
// код
{{/if}}

позволяет определить видимость кода в зависимости от значения свойства emailsVisible - если это свойство равно true, то блок кода между {{#if emailsVisible}} и {{/if}} добавляется на веб-страницу.

Для перебора массивов можно воспользоваться конструкцией each

{{#each emails}}
    <li>{{this}}</li>
{{/each}}

Эта конструкция перебирает все элементы из массива emails и создает для них элемент <li>. Текущий перебираемый элемент помещается в переменную this.

В итоге при обращении по пути /contact на веб-странице в виде списка будет отображаться массив:

4.23.png

Изменение пути к предтавлениям¶

По умолчанию представления помещаются в папку views, но мы можем выбрать любую другую папку в проекте. Для этого необходимо установить параметр views:

const express = require('express');

const app = express();

app.set('view engine', 'hbs');
app.set('views', 'templates'); // установка пути к представлениям

app.use('/contact', function (request, response) {
    response.render('contact');
});

app.listen(3000);

В данном случае в качестве папки представлений используется папка templates.

Представления и движок представлений Handlebars¶

Модель представления¶

Изменение пути к предтавлениям¶

Комментарии