Используя несколько пользовательских событий в качестве триггеров в HTMX, могу ли я определить, какой из триггеров используется?
Я использую HTMX в своем проекте Django для изменения элементов в форме в зависимости от предыдущих выборов. В определенный момент я использую пользовательское событие и слушаю его, как указано в решении 3 здесь: https://htmx.org/examples/update-other-content/
Все работает как ожидалось, также при использовании двух триггеров, разделенных запятой.
Однако я хотел бы передавать заголовок, значение которого зависит от события, используемого в качестве триггера. Триггер foo -> заголовок A, триггер bar -> заголовок B. Ниже приведен код, который должен помочь понять.
<div hx-get="{% url 'someurl' %}"
hx-trigger="foo from:body, bar from:body"
hx-target="#sometarget"
hx-swap="outerHTML"
hx-headers='{"someheader":"foo_value"}' OR '{"someheader":"bar_value"}'>
До сих пор я пробовал:
- Установка target.value в качестве значения заголовка (его можно использовать как фильтр триггера, поэтому я подумал, что это может работать и в hx-заголовках)
- Передача заголовков или контекстных переменных в представлении, которое вызывает срабатывание триггера, чтобы затем я мог использовать Django's {% if %} в шаблоне. Но они не попадают сюда, потому что представление рендерит другую часть шаблона, а это просто срабатывает, потому что оно слушает событие на теле из-за пузырька событий .
Есть предложения?
HTMX предоставляет событие htmx:configRequest
, где мы можем проверять и изменять полезную нагрузку до того, как HTMX отправит запрос. Запускающее событие находится в свойстве evt.detail.triggeringEvent.type
, объект заголовка находится в evt.detail.headers
. Поэтому мы можем добавить пользовательский заголовок в зависимости от события срабатывания, включив следующий JS-фрагмент на конкретной странице:
<script>
document.body.addEventListener('htmx:configRequest', (evt) => {
if (evt.detail.triggeringEvent.type === 'foo') {
evt.detail.headers['someheader'] = 'foo_value'
}
if (evt.detail.triggeringEvent.type === 'bar') {
evt.detail.headers['someheader'] = 'bar_value'
}
})
</script>