Перейти к содержанию

Частичные представления в Handlebars

Нередко вeб-страницы в приложении используют какие-то общие элементы. Это может быть меню, шапка сайта, футер, другие элементы. Однако здесь встает проблема: если потребуется поменять этот общий элемент, то придется вносить изменения на все веб-страницы, которые используют этот элемент. И было бы гораздо проще определить этот элемент в одном месте, а затем подключать на все страницы.

Решить эту проблему помогают частичные представления (partial views), которые представляют разделяемые общие элементы, которые можно добавлять на обычные представления.

К примеру, мы можем сделать общее меню и общий футер. Для этого создадим для частичных представлений в проекте подкаталог views/partials.

Добавим в папку views/partials новый файл menu.hbs:

1
2
3
4
<nav>
    <a href="/">Главная</a> |
    <a href="/contact">Контакты</a>
</nav>

Затем также добавим в views/partials новый файл footer.hbs:

1
<footer><p>MyCorp - Copyright © 2017</p></footer>

Это два частичных представления, которые мы будем подключать в обычные представления.

В папке views определим обычное представление contact.hbs:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
    <meta charset="utf-8" />
</head>
<body>
    {{> menu}}

    <h1>{{title}}</h1>
    <p>Электронный адрес: {{email}}</p>
    <p>Телефон: {{phone}}</p>

    {{> footer}}
</body>
<html>

Для вставки частичного представления применяется выражение {{> menu}}, в котором прописывается имя файла частичного представления без расширения.

Также добавим в папку views новое представление, которое назовем home.hbs:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <title>Главная страница</title>
    <meta charset="utf-8" />
</head>
<body>
    {{> menu}}
    <h1>Главная страница</h1>
    {{> footer}}
</body>
<html>

Таким образом, у нас два представления, которые имеют общие элементы. И если нам потребуется добавить какой-нибудь новый пункт меню, то достаточно изменить файл menu.hbs.

В итоге весь проект будет выглядеть следующим образом:

  • app.js
  • node_modules
  • views
    • contact.hbs
    • home.hbs
    • partials
      • footer.hbs
      • menu.hbs

В конце изменим файл app.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
const express = require('express');
const hbs = require('hbs');
const app = express();

app.set('view engine', 'hbs');
hbs.registerPartials(__dirname + '/views/partials');

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

app.use('/', function (request, response) {
    response.render('home.hbs');
});
app.listen(3000);

Для настройки функционала частичных представлений в коде используется вызов:

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

который устанавливает каталог, где располагаются частичные представления.

И если мы запустим проект и обратимся по одному из двух маршрутов: / или /contact, то после рендеринга представления веб-страница будет содержать меню и футер:

4.8.png

Комментарии