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

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

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

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

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

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

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

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

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

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

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

<!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:

<!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:

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)

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

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

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

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

4.8.png

Комментарии