HTMX - 第三方整合

HTMX 是一個有用的庫，它使您能夠直接從 HTML 中使用現代瀏覽器功能，而無需編寫 JavaScript。但是，在現實世界的應用程式中，您通常需要將 HTMX 與其他 JavaScript 庫和工具結合使用。整合 HTMX 意味著將其包含在您的專案中並將其配置為與這些庫一起工作。本文將指導您如何有效地執行此操作，以提高功能和使用者體驗。

為什麼要與第三方庫整合？

第三方整合是指使 HTMX 與其他 JavaScript 庫或框架協同工作的過程。這很重要，因為

它允許您利用 HTMX 本身不提供的特定功能。
它改進了使用者介面互動，超越了 HTMX 的內建功能。
它使在已經使用其他庫的專案中開始使用 HTMX 變得更容易。
它將 HTMX 的簡單性與其他知名工具的功能相結合

基於事件的整合

基於事件的整合是使 HTMX 與其他庫協同工作的重要組成部分。它涉及使用第三方庫觸發的事件作為 HTMX 執行操作的訊號。

將第三方事件與 HTMX 結合使用

HTMX 可以檢測並響應其他庫建立的自定義事件。這是透過使用 hx-trigger 屬性完成的，該屬性指示 HTMX 何時發出請求或執行操作。

示例

<div class="sortable" hx-post="/update-order" hx-trigger="sortupdate">
    <div>Product 1</div>
    <div>Product 2</div>
    <div>Product 3</div>
</div>

在此示例中，sortupdate 是一個自定義事件，可以由排序庫觸發。當此事件發生時，HTMX 將向 '/update-order' 傳送 POST 請求。

示例：與 SortableJS 整合

這是一個使用 SortableJS（一個流行的拖放庫）的更完整的示例。

<form class="sortable" hx-post="/items" hx-trigger="end">
    <div class="htmx-indicator">Updating...</div>
    <div><input type='hidden' name='item' value='1'/>Item 1</div>
    <div><input type='hidden' name='item' value='2'/>Item 2</div>
    <div><input type='hidden' name='item' value='3'/>Item 3</div>
</form>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
<script>
htmx.onLoad(function(content) {
    var sortables = content.querySelectorAll(".sortable");
    for (var i = 0; i < sortables.length; i++) {
        new Sortable(sortables[i], {
            animation: 150,
            ghostClass: 'blue-background-class'
        });
    }
})
</script>

此程式碼使用 SortableJS 建立一個可排序列表。hx-trigger="end" 屬性告訴 HTMX 在排序操作完成後傳送 POST 請求。

初始化第三方內容

在使用 HTMX 和 第三方庫時，正確初始化元件非常重要，尤其是在處理動態載入的內容時。

使用 htmx.onLoad

htmx.onLoad 函式是 HTMX 中的一個特殊方法，每當將新內容新增到 DOM 時都會執行。這是初始化第三方元件的絕佳時機。

示例

htmx.onLoad(function(content) {
    // Initialize third-party components here
    var datepickers = content.querySelectorAll(".datepicker");
    datepickers.forEach(function(picker) {
        new Datepicker(picker, {
            // options
        });
    });
})

在此示例中，我們在所有具有類“datepicker”的元素上初始化一個假設的日期選擇器元件。htmx.onLoad 函式確保此初始化不僅在頁面首次載入時發生，而且每當 HTMX 載入可能包含日期選擇器元素的新內容時也發生。

處理動態新增的內容

有時，您可能會使用 JavaScript 動態地將 HTML 內容新增到您的頁面。如果此內容包含 HTMX 屬性，則需要通知 HTMX 處理新內容。

使用 htmx.process()

htmx.process() 函式用於使 HTMX 瞭解已新增到 DOM 的新內容。此函式掃描提供的內容以查詢 HTMX 屬性，並設定必要的事件偵聽器和行為。

示例

fetch('/api/new-content')
    .then(response => response.text())
    .then(html => {
        let container = document.getElementById('content-container');
        container.innerHTML = html;
        htmx.process(container);
});

在此示例中，我們正在從 API 中獲取新內容並將其新增到頁面。在將新 HTML 新增到 DOM 後，我們呼叫 htmx.process(container) 以確保 HTMX 正確初始化新內容中的任何 HTMX 屬性。

使用模板庫

模板庫（如 Alpine.js 或 Vue.js）根據資料或使用者互動動態呈現內容。在將這些庫與 HTMX 一起使用時，務必確保 HTMX 正確處理動態呈現的內容。

示例：Alpine.js 整合

Alpine.js 是一個輕量級的 JavaScript 框架，允許您直接在標記中新增行為。以下是如何將其與 HTMX 整合。

<div x-data="{ show: false }">
    <button @click="show = true">Show Content</button>
    <template x-if="show">
        <div id="new-content">
            <button hx-get="/api/data" hx-target="#result">Load Data</button>
            <div id="result"></div>
        </div>
    </template>
</div>

<script>
    document.addEventListener('alpine:initialized', () => {
        Alpine.effect(() => {
            if (Alpine.$data.show) {
                htmx.process(document.querySelector('#new-content'));
            }
        });
    });
</script>

在此示例中，我們使用 Alpine.js 有條件地呈現內容。當內容可見時，我們呼叫 htmx.process() 以啟用新渲染元素中的 HTMX 屬性。

Web Components 整合

Web Components 是一組 Web 平臺 API，允許您建立可重用的自定義元素。HTMX 可用於 Web Components 中，包括 Shadow DOM 內部。

在 Web Components 中使用 HTMX

這是一個如何在 Web Component 中使用 HTMX 的示例。

class MyComponent extends HTMLElement {
    constructor() {
        super();
        let shadow = this.attachShadow({mode: 'open'});
        shadow.innerHTML = `
            <div>
                <button hx-get="/api/data" hx-target="#result">Get Data</button>
                <div id="result"></div>
            </div>
        `;
        htmx.process(shadow);
    }
}  
customElements.define('my-component', MyComponent);

在此示例中，我們建立一個在其中使用 HTMX 的 Web Component。htmx.process(shadow) 呼叫使 HTMX 在元件的 Shadow DOM 中工作。

整合 HTMX 的最佳實踐

在將 HTMX 與 第三方庫整合時，請牢記以下幾點

始終使用 htmx.onLoad 初始化第三方元件。
請記住，在動態新增啟用 HTMX 的內容時呼叫 htmx.process()。
不要忘記處理 Web Components 中的 Shadow DOM。
使用 HTMX 事件（如 htmx:load 和 htmx:afterSettle）與其他庫協調。

列印頁面