В этой части учебника мы разберём что такое движок представления Handlebars в Express.js, как с ним работать и зачем вообще нужен, будет интересно.
Что такое Handlebars:
В заголовке к части уже и так написано, что это такое, то это движок представления, но если более понятным языком, то это шаблоны, к которым вы можете передавать различные данные и зависимо от них, генерировать страницу.
Зачем нужен Handlebars:
Как наверное уже многие поняли, он нужен для создания страниц зависим от контента, например, вы сможете легко создать шаблон для страницы пользователя, передав туда информацию нужного вам пользователя, или любую другую подобную вещь.
Установка Handlebars:
Но чтобы пользоваться Handlebars, вам нужно в начале его установить с помощью NPM, для этого зайдите в корневую папку проекта в терминале, и введите эту команду:
1 | npm install hbs --save |
Теперь вы можете работать с ним.
Работа с Handlebars:
Для начала давайте создадим сам рендер, для этого создадим не большой рутинг на который будет отправлять рендер, а вмести с ним и данные для него:
1 2 3 4 5 6 7 8 9 10 11 | const Router = require('express'); const router = new Router() router.get('/', function(req, res) { res.render("user.hbs", { title: "Страница пользователя", name: "Vova", }); }); module.exports = router |
Как видите для отправки шаблонов мы используем метод res.render(), который первым параметром принимает в себя название шаблона, который берётся из папки «views», второй параметр это объект с данными, которые мы хотим передать.
Теперь создадим сам шаблон, для этого как возможно вы уже поняли, создадим папку «views», если её у вас нет, и создаём файл «user.hbs», вот что в нём пишем:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <title>{{title}}</title> <meta charset="utf-8" /> </head> <body> <h1>{{title}}</h1> <p>Имя пользователя: {{name}}</p> </body> <html> |
Как видите для вывода в шаблоне данных из объекта, который мы передали при рендари, достаточно просто их заключить в двойные фигурные скобки.
Также кроме простого вывода, вы можете делать в шаблоне и другие действия, например создавать условия и выводить массив данных.
Вот что вам нужно выводить для условий:
1 2 3 | {{#if visible}} // код {{/if}} |
Вот работа или вывод массива:
1 2 3 | {{#each arr}} <li>{{this}}</li> {{/each}} |
Тут вы можете заметить одно сходство, для обозначения команды, используется знак решётка, в начале название команды, и в целом тут всё просто.
Частичные представления в Handlebars:
Частичное представление, это когда вы можете использовать один шаблоны, в другом шаблоне, например таким образом как правило добавляет меню и подвал сайта, или другие элементы, которые одинаковы на каждой страницы сайта.
Для примера, давайте создадим два файла «nav.hbs» и «footer.hbs», но создадим их в папке «partials», которая должна быть внутри папки «views».
Также в «index.js», который находится в корневой папке, добавляем этот код в этот файл:
1 2 3 4 5 | ... const hbs = require("hbs"); ... hbs.registerPartials(__dirname + "/views/partials") ... |
Он даёт обозначение того, откуда нам брать шаблоны для частичного представления, последние дорабатываем наш файл, вот что в нём теперь пишем:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <title>{{title}}</title> <meta charset="utf-8" /> </head> <body> {{> nav}} <h1>{{title}}</h1> <p>Имя пользователя: {{name}}</p> {{> footer}} </body> <html> |
То есть, чтобы вложить внутрь одного шаблона, ещё шаблоны, нам нужно использовать знак «>», после чего пишем название файла, но без его расширения.
Вывод:
Как видите благодаря Handlebars в Express.js, можно очень гибко генерировать страницы, что в достаточно в крупных проектах, вы будите использовать очень часто.
Подписываетесь на соц-сети:
Оценка:
Загрузка...