Скриптинг

Хотя htmx поощряет гипермедийный подход к созданию веб-приложений, он предоставляет множество возможностей для клиентского скриптинга. Скриптинг включён в REST-описание веб-архитектуры, см.: Code-On-Demand. Насколько это возможно, мы рекомендуем использовать дружественный к гипертексту подход к скриптингу в ваших веб-приложениях:

• Соблюдайте HATEOAS
• Используйте события для взаимодействия между компонентами
• Применяйте изолированные острова для отделения негипермедиа-компонентов от остальной части приложения
• Рассмотрите возможность встраивания скриптов непосредственно в код

Основной точкой интеграции между htmx и решениями для скриптинга являются события, которые htmx отправляет и на которые может реагировать. Пример с SortableJS в разделе Сторонний JavaScript служит хорошим шаблоном для интеграции JavaScript-библиотеки с htmx через события.

Решения для скриптинга, которые хорошо сочетаются с htmx, включают:

• VanillaJS — Использование встроенных возможностей JavaScript для привязки обработчиков событий к событиям, генерируемым htmx, может быть очень эффективным. Это чрезвычайно лёгкий и всё более популярный подход.
• AlpineJS — Alpine.js предоставляет богатый набор инструментов для создания сложных клиентских скриптов, включая поддержку реактивного программирования, оставаясь при этом очень лёгким. Alpine поощряет подход со «встроенными скриптами», который, как мы считаем, хорошо сочетается с htmx.
• jQuery — Несмотря на возраст и репутацию в некоторых кругах, jQuery отлично сочетается с htmx, особенно в старых кодовых базах, где уже используется много jQuery.
• hyperscript — Hyperscript — это экспериментальный язык клиентского скриптинга, созданный той же командой, что и htmx. Он разработан для удобного встраивания в HTML, обработки и создания событий и идеально сочетается с htmx.

У нас есть целая глава под названием Клиентский скриптинг в нашей книге, которая рассматривает, как можно интегрировать скриптинг в приложение, основанное на htmx.

Атрибуты hx-on*

HTML позволяет встраивать скрипты непосредственно в код с помощью свойств onevent, таких как onClick:

<button onclick="alert('На меня нажали!')">
  Нажми меня!
</button>

Эта функция позволяет размещать скриптовую логику рядом с HTML-элементами, к которым она применяется, обеспечивая хорошую Локализацию поведения (Locality of Behaviour, LoB).

К сожалению, HTML поддерживает атрибуты on* только для ограниченного числа определённых DOM-событий (например, onclick) и не предоставляет универсального механизма для обработки произвольных событий на элементах.

Чтобы устранить этот недостаток, htmx предлагает атрибуты hx-on*. Они позволяют реагировать на любое событие, сохраняя принцип Локализации поведения, как в стандартных атрибутах on*.

Если мы хотим обработать событие click с помощью атрибута hx-on, это будет выглядеть так:

<button hx-on:click="alert('На меня нажали!')">
  Нажми меня!
</button>

Таким образом, используется строка hx-on, за которой следует двоеточие (или дефис), а затем название события.

Для события click, конечно, мы рекомендуем использовать стандартный атрибут onclick.

Однако рассмотрим кнопку с htmx, которая хочет добавить параметр к запросу, используя событие htmx:config-request. Стандартный атрибут on* не позволит этого сделать, но это возможно с атрибутом hx-on:htmx:config-request:

<button hx-post="/example"
        hx-on:htmx:config-request="event.detail.parameters.example = 'Привет, скриптинг!'">
  Отправьте меня!
</button>

Здесь параметр example добавляется к POST-запросу перед его отправкой со значением 'Привет, скриптинг!'.

Другой пример использования — сброс пользовательского ввода после успешного запроса с помощью события afterRequest, что избавляет от необходимости использовать механизмы вроде побочной замены (out-of-band swap).

Атрибуты hx-on* представляют собой простой механизм для обобщённого встроенного скриптинга. Они не заменяют более развитые фронтенд-решения, такие как AlpineJS или hyperscript, но могут дополнить VanillaJS-подход в приложениях на htmx.

Важно: HTML-атрибуты не чувствительны к регистру. Это означает, что события, зависящие от верблюжьей нотации (camelCase), не могут быть обработаны через hx-on*. Если требуется поддержка camelCase-событий, рекомендуем использовать более функциональные решения вроде AlpineJS или hyperscript.

Для удобства htmx дублирует все свои события в двух вариантах: camelCase и kebab-case.