Передача данных в представление Handlebars

Из маршрута в представление можно передавать данные. Для этого вторым параметром метода render нужно передать объект с данными:

index.jsapp.get('/page/', function(req, res) {
  res.render('page', {text1: 'aaa', text2: 'bbb'});
});

Как вы видите, в моем объекте два ключа: text1 и text2. Это значит, что в файле представления (как в контенте, так и в макете) появятся две переменные с таким именем. Вывести значения этих переменных можно написав их имя в двойных фигурных скобках.

Давайте попробуем. Пусть у нас есть следующий файл контента:

views/page.hbs<div>
  content
</div>

Выведем в этом файле наши переменные:

views/page.hbs<div>
  content
  {{text1}} {{text2}}
</div>

Можно вывести их в каких-то тегах:

views/page.hbs<div>
  content
  <span>{{text1}}</span>
  <span>{{text2}}</span>
</div>

Можно вывести их и в атрибутах тегов:

views/page.hbs<div>
  content
  <input value="{{text1}}">
  <img src="{{text2}}">
</div>
Задание 1

Передайте в контент пять переменных. Выведите каждую переменную в своем абзаце.

Задание 2

Передайте в контент переменную с путем к картинке. Выведите на экран соответствующее изображение.

Задание 3

Передайте в контент переменные с текстом и хрефом ссылки. Выведите в на экран ссылку, созданную с помощью этих переменных.

Экранировка тегов

Для вывода переменных можно использовать как две фигурные скобки, так и три. В первом случае в целях безопасности будет происходить экранировка тегов, а во втором случае теги будут преобразованы в команды для браузера.

Давайте посмотрим на примере. Пусть у нас передается некоторая переменная, содержащая внутри себя теги:

index.jsapp.get('/page/', function(req, res) {
  res.render('page', {text: '<b>aaa</b>'});
});

Давайте выведем содержимое переменной с помощью обоих команд:

views/page.hbs<div>
  {{text}}
</div>
<div>
  {{{text}}}
</div>
Задание 4

Запустите приведенный код у себя в браузере и посмотрите на разницу приведенных команд.