Используя несколько пользовательских событий в качестве триггеров в 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>
Вернуться на верх