Шаблоны Edge

Возвращать HTML строкой из контроллера неудобно. Для страниц в AdonisJS есть шаблонизатор Edge: шаблон — это файл с HTML и вставками данных, а контроллер только передаёт в него данные. Шаблоны лежат в папке resources/views/ и имеют расширение .edge.

Создание шаблона

node ace make:view pages/posts/index

Команда создаст пустой файл resources/views/pages/posts/index.edge. Напишите в нём:

{{-- resources/views/pages/posts/index.edge --}}
<h1>{{ title }}</h1>
<p>Всего статей: {{ posts.length }}</p>

Двойные фигурные скобки выводят значение выражения JavaScript. Запись {{-- ... --}} — комментарий Edge, в HTML он не попадает.

Вывод шаблона из контроллера

// app/controllers/posts_controller.ts
import type { HttpContext } from '@adonisjs/core/http'
 
export default class PostsController {
  async index({ view }: HttpContext) {
    const posts = [
      { id: 1, title: 'Первая статья' },
      { id: 2, title: 'Привет, AdonisJS' },
    ]
    return view.render('pages/posts/index', { title: 'Блог', posts })
  }
}

view.render принимает путь к шаблону от папки resources/views без расширения и объект с данными. Ключи объекта становятся переменными шаблона. Откройте /posts — появится заголовок «Блог» и строка «Всего статей: 2».

Условия

{{-- resources/views/pages/posts/index.edge --}}
@if(posts.length === 0)
  <p>Статей пока нет.</p>
@elseif(posts.length === 1)
  <p>Одна статья.</p>
@else
  <p>Статей: {{ posts.length }}</p>
@end

Теги Edge начинаются с @, а блок закрывается тегом @end.

Циклы

Тег @each перебирает массив. Ветка @else внутри него сработает, если массив пуст:

{{-- resources/views/pages/posts/index.edge --}}
<ul>
  @each(post in posts)
    <li>
      <a href="{{ route('posts.show', { id: post.id }) }}">{{ post.title }}</a>
    </li>
  @else
    <li>Статей пока нет.</li>
  @end
</ul>

На странице появится список заголовков, каждый — ссылка на статью. Номер элемента можно получить записью @each((post, index) in posts).

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

Edge экранирует всё, что выводят {{ }}: если в заголовке статьи окажется <script>, он будет показан как текст, а не выполнен. Когда HTML нужно вывести как есть, например текст статьи из проверенного редактора, используют тройные скобки:

{{-- resources/views/pages/posts/show.edge --}}
<article>{{{ post.bodyHtml }}}</article>

Частая ошибка

Тройные скобки для текста, который ввёл пользователь, открывают дорогу XSS-атаке: чужой скрипт выполнится в браузере каждого посетителя. Выводите пользовательские данные только через {{ }}, а {{{ }}} оставьте для HTML, который вы сформировали и очистили сами.