В прошлой статье мы разобрали, что такое TGX DSL и зачем он нужен. Теперь покажем, как применять его в реальной работе. Разберём пять базовых задач; формы, права доступа и интеграции потребуют отдельной настройки.
1. Вывод списка записей через tgx:repeat#
Самый частый приём — вывести карточки из коллекции. Директива tgx:repeat повторяет один элемент для каждой записи.
<article tgx:repeat="/blog/?filter[AND][status]=active -> item">
<h2><< item.title >></h2>
<a href="/blog/<< item.slug >>/">Читать</a>
</article>Один блок заменяет ручную публикацию десятков карточек. Изменили запись — карточка обновилась сама.
2. Условия отображения через tgx:if#
Не всегда нужно показывать блок всем. Директива tgx:if оставляет элемент только когда условие истинно.
<section tgx:if="user.id">
Добро пожаловать, << user.name >>!
</section>Так меняется вывод страницы. Проверку доступа к данным и API настраивают отдельно: скрытие блока не заменяет серверные права.
3. Переиспользование блоков через tgx:component#
Повторяющиеся блоки — карточки, шапки, формы — выносятся в компоненты и подключаются одной строкой.
<tgx tgx:component="/components/card" payload="<< local >>"></tgx>Изменили компонент один раз — он обновился на всех страницах, где подключён.
4. Подстановка значений в текст и атрибуты#
Выражения в двойных угловых скобках подставляют значения прямо в текст или атрибуты.
<h1><< page.title >></h1>
<a href="/product/<< product.slug >>/">Подробнее</a>Значения можно форматировать: например, цену вывести в валюте через :currency2.
Цена: << product.Price:currency2 >>5. Условные атрибуты#
Иногда нужно добавить атрибут только при определённом условии. Для этого используется суффикс $.
<option selected$="item.id == request.get.id"><< item.title >></option>Такой приём удобен для выпадающих списков, чекбоксов и переключателей.
Итог#
Эти пять приёмов — база, с которой начинается практическая работа с TGX DSL. Они ускоряют вёрстку, убирают дубли и позволяют обновлять контент без правки кода. Освоив их, вы сможете собирать динамические страницы так же быстро, как статичные.
Где запускать примеры#
В песочнице можно проверять массивы, условия и подстановку значений. Пример с /blog/ требует существующей коллекции рабочего сайта, а /components/card — созданного компонента. Их нельзя считать автономными примерами для песочницы. Имена пользовательских полей, например Price, должны точно совпадать со схемой вашей коллекции. Для каждого блока проверьте обычное значение, пустое поле и пустой список; затем измените одну запись и убедитесь, что изменился нужный вывод.
