Логотип Tagix
Изображение Изображение
Назад

tgx:repeat#

Цикл по массиву/коллекции.

Синтаксис#

<li tgx:repeat="list -> item">...</li>

Пример 1: минимум (копипаст для старта)#

<li tgx:repeat="list -> item">...</li>

Пример 2: реальный сценарий#

<article tgx:repeat="../?filter[status]=active -> value">
  <h3><< value.title >></h3>
</article>

Разбор#

Переменная цикла доступна внутри повторяемого узла.

Когда использовать#

  • Когда нужно вывести список карточек, ссылок, тегов или пунктов меню из массива/коллекции.
  • Когда нужно управлять поведением цикла: пропускать элементы (tgx:continue) или завершать цикл раньше (tgx:break).

Поведение в runtime#

  • Тип: пользовательская директива.
  • В sandbox директива tgx:repeat: разрешена.

Параметры#

Обязательные#

  • tgx:repeat — выражение в формате source -> item или source -> key, item.

Типы#

  • source: массив/коллекция/итерируемое значение.

Частые ошибки#

  • Используйте синтаксис expr -> item в форме стрелки.
  • В цикле не переиспользуйте имя внешней переменной, чтобы избежать перезаписи контекста.

Проверка перед публикацией#

  • Пример рендерится без ошибок в sandbox.
  • Значения по умолчанию обработаны (|fallback) там, где данные могут отсутствовать.
  • Лимиты/фильтры на выборку выставлены, чтобы не перегружать рендер.

Пересечение: tgx:repeat + tgx:record-actions + tgx:dom-actions#

Используйте следующий шаблон, если в списке нужны и record-actions, и dom-actions: 
<div tgx:repeat="/faq/*?filter[status]=active&select=id,title,slug&limit=10 -> item"
     tgx:record-actions="admin, owner -> edit,duplicate,move,delete">
  <article tgx:dom-actions="admin, owner -> edit,duplicate,move">
    <h3><< item.title >></h3>
  </article>
</div>
  • Ставьте tgx:record-actions на контейнер repeat, а tgx:dom-actions — на внутренний узел карточки.
  • Для wildcard-пути (.../) item-endpoint для record-actions нормализуется в .../<id> (без ).
  • Если в query уже есть select, runtime автоматически добавит id для действий edit/update/delete/move/duplicate.
  • DOM-редактирование в repeat работает по селектору шаблонного узла: изменение применяется к прототипу и отражается на всех повторенных элементах.
  • После DOM-действий в repeat swap направляется на контейнер repeat, поэтому обновляется весь блок списка.

См. также#