Htmx 的多个目标

Question

我的 htmx 上有多个触发器。

<input list="users_list" type="text" name="user_name" class="search-bar" placeholder="Username"
    id="user_search_bar"
    value=""
    hx-trigger="keyup delay:500ms, change"
    x-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
    hx-post="{% url 'search_user' %}"
    hx-target="#users_list"
    <datalist id="users_list">
          <option value="elem">elem</option>
    </datalist>

如何为每个触发器声明一个目标。例如，当触发器是“keyup delay”时，目标应该是“users_list”，如果触发器是“change”，则目标应该是“endor_list”

Answer 1

使用 HTMX 实现此目的的唯一方法是利用继承并在输入周围使用几个嵌套的外部元素。

每个外部元素都有自己的触发器和目标属性。您还可以为每个属性设置不同的 hx-post 属性，或者将其保留在输入中。这是示例代码：

<div hx-target="#vendor_list" hx-trigger="change" hx-post="/vendor">

    <div hx-target="#users_list" hx-trigger="keyup delay:500ms" hx-post="/users">

        <input list="users_list" type="text" name="user_name" class="search-bar" placeholder="Username" id="user_search_bar" value="">

        <datalist id="users_list">
            <option value="elem">elem</option>
        </datalist>

    </div>

</div>

<div id="vendor_list">
    vendor list
</div>

这是有效的，因为当“捕获”事件的元素将使用元素本身内指定的目标时。你可以在这里看到它的工作https://codepen.io/jreviews/pen/PodpMYd