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

Последнее обновление: 23.11.2023

Нередко в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: "Мои контакты",
        email: "gavgav@mycorp.com",
        phone: "+1234567890"
    });
}); 

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

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

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

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

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

Partial Views in Express and Node.js

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850