TGX добавляет к HTML вывод данных, условия и повтор элементов. Сервер Tagix обрабатывает шаблон и отдаёт браузеру готовый HTML. Для собственного оформления нужны HTML и CSS; TGX не превращает разработку в работу без кода.
Первый пример без базы данных#
Откройте песочницу, вставьте код во вкладку TGX и нажмите «Запустить». Данные здесь задаются прямо в примере, поэтому подключать коллекцию не нужно.
<tgx tgx:set="services">["Дизайн", "Вёрстка", "Поддержка"]</tgx>
<ul>
<li tgx:repeat="services -> service"><< service >></li>
</ul>Результат — список из трёх пунктов. Измените одно название и запустите снова: изменится соответствующий пункт. Удалите все элементы массива: повторяемые пункты исчезнут. Оформление списка можно добавить во вкладке CSS.
Чем это отличается от копирования HTML#
В статичной странице для новой услуги нужно вручную добавить ещё один li. Здесь структура описана один раз, а количество пунктов определяется данными. В рабочем проекте данные можно хранить в коллекции; изменение записи обновляет вывод при следующем рендере страницы.
Условие и запасной текст#
<tgx tgx:set="hasPrice">false</tgx>
<p tgx:if="hasPrice">Цена указана в карточке услуги.</p>
<p tgx:else>Стоимость уточняется после обсуждения задачи.</p>Поменяйте false на true, чтобы увидеть другую ветку. Условие управляет видимым HTML. Доступ к закрытым данным и операциям API нужно ограничивать отдельно.
Как перейти к рабочему сайту#
- Сделайте одну понятную статичную страницу.
- Вынесите повторяющиеся данные в коллекцию и создайте несколько тестовых записей.
- Замените ручные карточки на
tgx:repeatс фильтром и ограничением количества. - Вынесите общую шапку или карточку в компонент.
- Проверьте заполненные и пустые данные, телефонный вид и гостевое открытие.
Песочница изолирована от данных сайта и не предназначена для отправки писем, записи в базу и проверки прав настоящих пользователей.
Дальше: пять практических приёмов, запросы к коллекциям и структура проекта.
