EJS -

Начало работы

Hello world

install

npm install ejs

hello.ejs

``html <% if (user.email) { %>

CLI

``Оболочка $ ejs hello.ejs -o hello.html




### Рендеринг с данными

let ejs = require(’ejs’);

let people = [‘geddy’, ’neil’, ‘alex’]; let tpl = ‘<%= people.join(", “); %>’;

let html = ejs.render(tpl, {people: people}); console.log(html);

Передаем EJS строку шаблона и некоторые данные.



### Поддержка браузеров

Использование ejs в теге script.



### Переменные
| | |
|--------------|----------------------------------|
| `<%= var %>` | Выводит значение переменной |
| `<%- var %>` | Выводит без экранирования HTML |


### CLI

Рендеринг и указание выходного файла.
``Оболочка
$ ejs hello.ejs -o hello.html

Передать ему файл шаблона и файл данных ``оболочка $ ejs hello.ejs -f data.json -o hello.html




### Комментарии
``html
<%# Эта строка будет обозначать комментарий %>

``html <%# Это многострочный комментарий EJS. Он может занимать несколько строк, но не будет отображаться в конечном HTML-выводе. %>





### Метод

let ejs = require(’ejs’); let template = ejs.compile(str, options);

template(data); // => Рендеринг HTML-строки

ejs.render(str, data, options); // => Рендеринг HTML-строки

ejs.renderFile(filename, data, options, function(err, str){ // str => Рендеринг HTML-строки });




### Включая файлы

``html
<%- include('partials/navbar.ejs') %>

Включение шаблона с данными:

``html <% include(‘header’, { title: ‘Моя страница’ }) %>

------------

``html
<ul>
  <% users.forEach(function(user){ %>
    <%- include('item', {user: user}); %>
  <% }); %>
</ul>

Для включения шаблона требуется опция имени файла, пути являются относительными

Docs

Условные обозначения

``html <% if (userLoggedIn) { %>

Использование циклов

``html <% if (userLoggedIn) { %>

Пользовательские разделители

let ejs = require('ejs'),
    users = ['geddy', 'neil', 'alex'];

// Только один шаблон
ejs.render('<?= users.join(" | "); ?>',
    {users: users},
    {delimiter: '?'});
// => 'geddy | neil | alex'

// Или глобально
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>',
    {users: users});
// => 'geddy | neil | alex'

Кэширование

let ejs = require('ejs'),
LRU = require('lru-cache');

// LRU-кэш с ограничением в 100 элементов
ejs.cache = LRU(100);

Пользовательский загрузчик файлов

let ejs = require('ejs');
let myFileLoader = function (filePath) {
  return 'myFileLoader: ' + fs.readFileSync(filePath);
};

ejs.fileLoader = myFileLoader;

Макеты

<%- include('header'); -%>
<h1>
  Заголовок
</h1>
<p>
  Моя страница
</p>
<%- include('footer'); -%>

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

Пример

<div id="output"></div>
<script src="ejs.min.js"></script>
<script>
  let people = ['geddy', 'neil', 'alex'],
      html = ejs.render('<%= people.join(", "); %>', {people: people});
  // С помощью jQuery:
  $('#output').html(html);
  // Ванильный JS:
  document.getElementById('output').innerHTML = html;
</script>

Оговорки

let str = "Hello <%= include('file', {person: 'John'}); %>",
      fn = ejs.compile(str, {client: true});

fn(data, null, function(path, d){ // обратный вызов включения
  // path -> 'file'
  // d -> {person: 'John'}
  // поместите сюда свой код
  // Возвращает содержимое файла в виде строки
}); // возвращает отрендеренную строку

Опции

Список опций

Опция	Описание
cache	Скомпилированные функции кэшируются, требуется имя файла
filename	Используется кэшем для ключа кэша, а также для include
root	Устанавливает корень проекта для include с абсолютным путем (например, /file.ejs). Может быть массивом, чтобы попытаться разрешить включение из нескольких каталогов.
	views
	context
	compileDebug
client	Возвращает автономную скомпилированную функцию
	delimiter
openDelimiter	Символ, используемый для открывающего разделителя, по умолчанию ‘<’
closeDelimiter	Символ, используемый для закрывающего разделителя, по умолчанию ‘>’
debug	Вывод сгенерированного тела функции
strict	Если установлено значение `true`, то генерируемая функция работает в строгом режиме
_with	Использовать или нет конструкцию with() {}. Если false, то локали будут храниться в объекте locals. (Подразумевается `--strict`)
localsName	Имя для объекта, хранящего локальные переменные, если не используется конструкция with По умолчанию - locals
rmWhitespace	Удалить все безопасные для удаления пробельные символы, включая ведущие и завершающие пробельные символы. Это также позволяет использовать более безопасную версию -%> удаления строк для всех тегов скриптов (не удаляет новые строки с тегами в середине строки).
escape	Функция экранирования, используемая с конструкцией <%=. Используется при рендеринге и .toString()ed при генерации клиентских функций. (По умолчанию экранирует XML).
	outputFunctionName
	async

Tag	Description
<%	Тег ‘Scriptlet’, для потока управления, без вывода
<%_	‘Whitespace Slurping’ Scriptlet тег, удаляет все пробельные символы перед ним
<%=	Вывод значения в шаблон (с HTML-экранированием)
<%-	Выводит в шаблон неэкранированное значение
<%#	Тег комментария, не выполняется, не выводится
<%%	Выводит литерал ‘<%’
%>	Обычный завершающий тег
-%>	Тег Trim-mode (’newline slurp’), обрезает следующую новую строку
_%>	Завершающий тег ‘Whitespace Slurping’, удаляет все пробельные символы после него

Cli

Список Cli

Примеры использования :

$ ejs -p [ -c ] ./template_file.ejs -o ./output.html
$ ejs ./test/fixtures/user.ejs name=Lerxst
$ ejs -n -l _ ./some_template.ejs -f ./data_file.json

EJS