Встроенные блочные вспомогательные функции

Набор встроенных блочных вспомогательных функций для шаблонизатора. Предоставляют функционал для работы с блоками.

if

Функция позволяет условно отображать блок. Если его аргумент возвращает false, undefined, null, "", или 0, шаблонизатор не отображает этот блок.

пример HTML


<div class="entry">
  not_var{{#if author}}
    <h1>{{firstName}} {{lastName}}</h1>
  not_var{{/if}}
</div>

При использовании с контекстом

{
  "author": true,
  "firstName": "Иван",
  "lastName": "Иванов"
}

Результат

<div class="entry">
  <h1>Иван Иванов</h1>
</div>

Если аргумент возвращает false, шаблонизатор отобразит все, что находится между {{else}} и закрывающим тегом блочной вспомогательной функции.

пример HTML

<div class="entry">
  not_var{{#if author}}
    <h1>{{firstName}} {{lastName}}</h1>
  {{else}}
    <h1>Автор неизвестен</h1>
  not_var{{/if}}
</div>

Для вложенных условий используется вспомогательный блок {{elseif}}.

пример HTML

<div class="order-status">
  <h2>Заказ №{{orderId}}</h2>

  not_var{{#if (eql status "delivered")}}
    <p class="success">✅ Ваш заказ доставлен!</p>
  not_var{{elseif (eql status "shipping")}}
    <p class="info">🚚 Ваш заказ в пути...</p>
  not_var{{elseif (eql status "cancelled")}}
    <p class="danger">❌ Заказ отменен</p>
  {{else}}
    <p class="default">⚪ Статус неизвестен</p>
  not_var{{/if}}
</div>

unless

Функция работает противоположно вспомогательной блочной функции if. Блок отображается, если выражение возвращает false.

пример HTML


<div class="entry">
  not_var{{#unless license}}
    <h3 class="warning">ПРЕДУПРЕЖДЕНИЕ: Этот проект не имеет лицензии!</h3>
  not_var{{/unless}}
</div>

Если при поиске по текущему контексту значение license возвращает false, шаблонизатор отображает предупреждение. В противном случае ничего не выводится.

each

Функция перебирает список. Внутри блока используется {{this}} для обращения к текущему элементу.

пример HTML


<ul class="people_list">
  not_var{{#each people}}
    <li>{{this}}</li>
  not_var{{/each}}
</ul>

При использовании с контекстом


{
  "people": ["Иванов Иван", "Петров Петр"]
}

Результат

<ul class="people_list">
  <li>Иванов Иван</li>
  <li>Петров Петр</li>
</ul>

Можно использовать блок {{else}}, который отображается, когда список пуст.

пример HTML

not_var{{#each paragraphs}}
  <p>{{this}}</p>
{{else}}
  <p class="empty">Нет контента</p>
not_var{{/each}}

При переборе элементов через each можно переименовать текущий элемент, индекс с помощью атрибута as.

пример HTML

<ul class="people_list">
  not_var{{#each people as |person index|}}
    <li>{{index}}. {{person}}</li>
  not_var{{/each}}
</ul>

repeat

Функция повторяет блок шаблона заданное количество раз. Это удобно для генерации однотипных элементов и создания заглушек.

пример HTML

<ul>
  not_var{{#repeat 3 as |index|}}
    <li>Элемент списка {{index}}</li>
  not_var{{/repeat}}
</ul>

Результат

<ul>
  <li>Элемент списка 0</li>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
</ul>

with

Функция изменяет контекст вычисления шаблонного блока.

пример HTML

not_var{{#with person}}
  {{firstname}} {{lastname}}
not_var{{/with}}

При использовании с контекстом

{
  "person": {
    "firstname": "Иван",
    "lastname": "Иванов"
  }
}

При работе с глубоко вложенными объектами*


not_var{{#with city.location}}
  <p>{{lat}}, {{long}}</p>
not_var{{/with}}

Можно использовать блок {{else}}, который отображается, когда переданное значение не задано.

пример HTML


not_var{{#with city}}
  {{city.name}} найден.
{{else}}
  Город не найден.
not_var{{/with}}

Была ли статья полезна?

Встроенные вспомогательные функции

Модели данных