htmx 同形異構擴展

Idiomorph 是由 htmx 的創建者開發的 DOM 變形演算法。DOM 變形是一種將現有的 DOM 樹「變形」為另一棵樹的過程，其方式盡可能地重複利用現有 DOM 的節點。透過在從一棵樹變更為另一棵樹時保留節點，可以在兩種狀態之間呈現更平滑的轉換。

您可以透過包含 idiomorph 擴展，將 idiomorph 變形演算法用作交換策略。

安裝

<script src="https://unpkg.com/idiomorph@0.3.0/dist/idiomorph-ext.min.js"></script>

用法

一旦您參考了 idiomorph 擴展，您就可以在 body 上註冊名稱為 morph 的擴展，然後開始使用 morph、morph:outerHTML 或 morph:innerHTML 作為交換策略。

morph & morph:outerHTML 將會變形目標元素及其子元素
morph:innerHTML 將僅變形元素的內部子元素，保持目標元素不變

<body hx-ext="morph">

    <button hx-get="/example" hx-swap="morph">
        Morph My Outer HTML
    </button>

    <button hx-get="/example" hx-swap="morph:outerHTML">
        Morph My Outer HTML
    </button>
    
    <button hx-get="/example" hx-swap="morph:innerHTML">
        Morph My Inner HTML
    </button>

</body>