如何处理 HTMX 中的嵌套属性

Question

我的页面中有一个类似于 table 的结构，每一行都有指向 url 的 data-hx-get 属性，其中 django returns 该行的详细信息。但也在同一行中，我有一个编辑按钮，其中 django returns 是该项目的编辑表单。我希望整行都是可点击的，当点击显示时，它会用详细信息替换它自己，还有编辑按钮用表单替换该行。它对用户来说工作正常但是当单击行内的编辑按钮时，在控制台中我得到 htmx:swapError 因为该行也接收到单击事件并执行它应该执行的操作。按钮上的事件优先，并且在行之前更改行的内容，当行获得响应时，该行的 data-hx-target 不再出现在页面中。所以，我的问题是，有没有办法告诉 htmx，当嵌套元素有 data-hx-get 时，忽略父元素的 hx 指令。

<div 
    class="row item-row" 
    id="item-row-{{item.pk|unlocalize}}"
    data-hx-get="{% url 'some url' item.pk %}
    data-hx-swap="outerHTML"
    data-hx-trigger="click"
    data-hx-target="this">
            ...
         <button
            data-hx-get="{% url 'editurl' item.pk %}"
            data-hx-swap="outerHTML"
            data-hx-trigger="click"></button>
</div>

Answer 1

您可以对 hx-trigger https://htmx.org/attributes/hx-trigger/ 使用 consume 修饰符。这将防止点击事件冒泡到父行。

<div 
    class="row item-row" 
    id="item-row-{{item.pk|unlocalize}}"
    data-hx-get="{% url 'some url' item.pk %}
    data-hx-swap="outerHTML"
    data-hx-trigger="click"
    data-hx-target="this">
            ...
         <button
            data-hx-get="{% url 'editurl' item.pk %}"
            data-hx-swap="outerHTML"
            data-hx-trigger="click consume"></button>
</div>

如何处理 HTMX 中的嵌套属性

How to handle nested attributes in HTMX

htmx