hx-targets

Установка

<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0/dist/htmx.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0/dist/ext/hx-targets.js"></script>

Использование

Добавьте атрибут hx-targets со значением CSS-селектора к любому элементу, который выполняет запрос htmx. Ответ будет подставлен во все соответствующие элементы с использованием обычной стратегии hx-swap каждого элемента.

<button hx-get="/api/notification" hx-targets=".alert-box">
    Refresh All Alerts
</button>

<div class="alert-box">Alert 1</div>
<div class="alert-box">Alert 2</div>
<div class="alert-box">Alert 3</div>

При нажатии кнопки ответ от /api/notification подставляется во все три элемента .alert-box.

Наследование

Чтобы унаследовать hx-targets от родительского элемента, используйте форму hx-targets:inherited на родительском элементе:

<div hx-targets:inherited=".card-body">
    <button hx-get="/api/content">Update All Cards</button>
    <button hx-get="/api/reset">Reset All Cards</button>

    <div class="card"><div class="card-body">Card 1</div></div>
    <div class="card"><div class="card-body">Card 2</div></div>
</div>

Обе кнопки будут подставлять свои ответы во все элементы .card-body.

Расширенные селекторы

Атрибут hx-targets поддерживает расширенный синтаксис селекторов htmx, включая closest, find, next и previous:

<div class="container">
    <button hx-get="/api/status" hx-targets="find .status">
        Update Statuses
    </button>
    <span class="status">OK</span>
    <span class="status">OK</span>
</div>

Взаимодействие с hx-target

Если задан hx-targets, он имеет приоритет над hx-target. Стиль подмены из hx-swap (по умолчанию: innerHTML) применяется к каждому соответствующему элементу.

<button hx-get="/api/time" hx-swap="innerHTML" hx-targets=".clock">
    Sync Clocks
</button>

<span class="clock">--:--</span>
<span class="clock">--:--</span>

Как это работает

Расширение обрабатывает событие htmx_before_swap. Когда на исходном элементе задан hx-targets:

1. Находятся все элементы, соответствующие селектору
2. Основная задача подмены заменяется отдельной задачей для каждого найденного элемента
3. Фрагмент ответа клонируется для каждой цели, чтобы каждый элемент получил полное содержимое ответа

Примечания

• Если селектор не соответствует ни одному элементу, в журнал записывается предупреждение, а подмена выполняется как обычно (с использованием hx-target или цели по умолчанию).
• Каждая цель получает копию полного ответа. Чтобы распределить разные части ответа по разным целям, используйте вместо этого <hx-partial> или hx-swap-oob.