HTMX - 第三方集成

HTMX 是一个实用的库，它使您能够直接从 HTML 使用现代浏览器功能，而无需编写 JavaScript。然而，在实际应用中，您经常需要将 HTMX 与其他 JavaScript 库和工具相结合。集成 HTMX 意味着将其包含在您的项目中并将其配置为与这些库一起工作。本文将指导您如何有效地执行此操作以改进功能和用户体验。

为什么要与第三方库集成?

第三方集成是指使 HTMX 与其他 JavaScript 库或框架一起工作的过程。这很重要，因为:

它允许您使用 HTMX 自身不提供的特定功能。
它改进了用户界面交互，超出了 HTMX 的内置功能。</li>
它使在已经使用其他库的项目中开始使用 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) {
    // 在这里初始化第三方组件
    var datepickers = content.querySelectorAll(".datepicker");
    datepickers.forEach(function(picker) {
        new Datepicker(picker, {
            // options
        });
    });
})

在此示例中，我们在所有具有"datepicker"类的元素上初始化一个假设的 datepicker 组件。htmx.onLoad 函数确保此初始化不仅在页面首次加载时发生，而且在 HTMX 加载可能包含 datepicker 元素的新内容时也发生。

处理动态添加的内容

有时，您可能会使用 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 组件集成

Web 组件是一组 Web 平台 API，允许您创建可重复使用的自定义元素。HTMX 可在 Web 组件中使用，包括在 Shadow DOM 内部。

在 Web 组件中使用 HTMX

以下是如何在 Web 组件中使用 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 组件。 htmx.process(shadow) 调用使 HTMX 在组件的影子 DOM 中工作。

集成 HTMX 的最佳实践

将 HTMX 与第三方库集成时，请牢记以下几点:

始终使用 htmx.onLoad 来初始化第三方组件。
记住在动态添加启用 HTMX 的内容时调用 htmx.process()。
不要忘记在 Web 组件中处理影子 DOM。
使用 HTMX 事件(如 htmx:load 和 htmx:afterSettle)与其他库协调。

HTMX 教程