如何处理 HTMX 中的嵌套属性答案

【问题标题】：How to handle nested attributes in HTMX如何处理 HTMX 中的嵌套属性
【发布时间】：2022-08-16 18:01:31
【问题描述】：

我的页面中有一个类似结构的表，每一行都有 data-hx-get 属性指向 django 返回该行详细信息的 url。但也在同一行中，我有一个编辑按钮，django 在其中返回该项目的编辑表单。我希望整行都是可点击的，当点击显示时，它会用详细信息替换自身，并且编辑按钮也可以用表单替换行。它对用户来说工作得很好，但是当点击行内的编辑按钮时，在控制台中我得到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>

标签： htmx

【解决方案1】：

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

<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>

【讨论】：