Из маршрута в представление можно передавать
данные. Для этого вторым параметром метода
render нужно передать объект с данными:
app.get('/page/', function(req, res) {
res.render('page', {text1: 'aaa', text2: 'bbb'});
});
Как вы видите, в моем объекте два ключа:
text1 и text2. Это значит,
что в файле представления (как в контенте,
так и в макете) появятся две переменные с
таким именем. Вывести значения этих переменных
можно написав их имя в двойных фигурных скобках.
Давайте попробуем. Пусть у нас есть следующий файл контента:
<div>
content
</div>
Выведем в этом файле наши переменные:
<div>
content
{{text1}} {{text2}}
</div>
Можно вывести их в каких-то тегах:
<div>
content
<span>{{text1}}</span>
<span>{{text2}}</span>
</div>
Можно вывести их и в атрибутах тегов:
<div>
content
<input value="{{text1}}">
<img src="{{text2}}">
</div>
Передайте в контент пять переменных. Выведите каждую переменную в своем абзаце.
Передайте в контент переменную с путем к картинке. Выведите на экран соответствующее изображение.
Передайте в контент переменные с текстом и хрефом ссылки. Выведите в на экран ссылку, созданную с помощью этих переменных.
Экранировка тегов
Для вывода переменных можно использовать как две фигурные скобки, так и три. В первом случае в целях безопасности будет происходить экранировка тегов, а во втором случае теги будут преобразованы в команды для браузера.
Давайте посмотрим на примере. Пусть у нас передается некоторая переменная, содержащая внутри себя теги:
app.get('/page/', function(req, res) {
res.render('page', {text: '<b>aaa</b>'});
});
Давайте выведем содержимое переменной с помощью обоих команд:
<div>
{{text}}
</div>
<div>
{{{text}}}
</div>
Запустите приведенный код у себя в браузере и посмотрите на разницу приведенных команд.