属性继承

htmx 中的大多数属性都是可继承的:它们适用于它们所在的元素以及任何子元素。这允许你在 DOM 中 “提升” 属性以避免代码重复。请参考以下 htmx:

<button hx-delete="/account" hx-confirm="Are you sure?">
    Delete My Account
</button>
<button hx-put="/account" hx-confirm="Are you sure?">
    Update My Account
</button>

这里我们有一个重复的 hx-confirm 属性。我们可以将此属性提升到父元素:

<div hx-confirm="Are you sure?">
    <button hx-delete="/account">
        Delete My Account
    </button>
    <button hx-put="/account">
        Update My Account
    </button>
</div>

此 hx-confirm 属性现在将应用于其中的所有 htmx 驱动的元素。

有时你希望撤消此继承。如果我们为该组设置了取消按钮,但不想确认。我们可以像这样在其上添加一个 unset 指令:

<div hx-confirm="Are you sure?">
    <button hx-delete="/account">
        Delete My Account
    </button>
    <button hx-put="/account">
        Update My Account
    </button>
    <button hx-confirm="unset" hx-get="/">
        Cancel
    </button>
</div>

然后,顶部的两个按钮会显示确认对话框,但底部的取消按钮则不会显示。

可以使用 hx-disinherit 属性禁用自动继承。