#2 – Основные атрибуты
Видеоурок
HTMX — это инструмент, который позволяет оживить ваш сайт, не прибегая к JavaScript. Он работает за счёт специальных HTML-атрибутов, которые управляют поведением элементов на странице.
Что делает «hx-get»?
Атрибут hx-get указывает, что при взаимодействии с элементом должен быть выполнен HTTP GET-запрос по указанному адресу. Это может быть кнопка, ссылка или даже div.
Пример: если вы повесили hx-get="/profile", то при загрузке произойдёт запрос к /profile, и вы получите HTML-ответ от сервера.
Куда вставить результат?
По умолчанию HTMX вставит полученный от сервера HTML прямо в тот элемент, на который вы нажали. Но чаще всего нужно контролировать, куда именно попадёт этот ответ.
Для этого есть hx-target — он указывает, в какой элемент на странице загрузить результат. Например, hx-target="#result" загрузит HTML в блок с ID result.
Это особенно удобно для обновления части страницы без перезагрузки.
Как именно вставляется HTML?
HTMX даёт гибкость не только в том, куда вставить ответ, но и как его вставить. За это отвечает hx-swap.
Вот самые популярные режимы:
innerHTML(по умолчанию) — заменяет содержимое целевого элементаbeforebegin— вставляет HTML перед целевым элементомafterbegin— вставляет внутрь, но в началеbeforeend— вставляет внутрь, но в конецafterend— вставляет после элемента
Материалы для курса
Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт
Задание к уроку
Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
Также стоит посмотреть
