Day5 - HTMX AJAX 提供的各種屬性操作（二）

Genos
2023-09-20 23:24:06

特殊事件

接續昨天講的事件觸發hx-trigger，HTMX 也提供了一些特殊場景應用：

load - 元素載入後觸發，只會觸發一次

revealed - 滾動到元素出現在畫面（viewport）中時觸發，只會觸發一次

intersect - 元素首次出現在畫面上時觸發，另外可以設定 root:<selector> 和 threshold:<float>，此功能對應的是 Web API - Intersection Observer API（https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API）

輪詢(Polling)

Polling 是每隔一段時間就打 API 來同步資訊，HTMX 中使用 every 這個名稱

基本用法：hx-trigger="every 間隔時間"，官方範例如下：

// 每隔兩秒發送 API 請求 GET /news


結合 load：hx-trigger="load 間隔時間"，此處的官方範例不是很明確，大致的理解是透過 load 加上延遲時間來觸發請求，請求的回應取得一個同樣包含 HTMX load 事件的內容，就可以像遞迴一樣不斷觸發

標示(Indicators)

在 API 請求期間，可以把 htmx-indicator 這個 ClassName 設定在 loading 期間才會出現的元素上，這個元素的 opacity 會被設定為 0

當 API 請求觸發，ClassName 會被換成htmx-request，opacity 變為 1，官方範例如下：


    Click Me!



如果需要自定標示的 CSS 樣式，需要對htmx-indicatorhtmx-request進行調整

.htmx-indicator{
    display:none;
}
.htmx-request .my-indicator{
    display:inline;
}
.htmx-request.my-indicator{
    display:inline;
}

如果要指定套用 loading 效果的元素，可以使用 hx-indicator="CSS selector" 來指定



        Click Me!




參考來源：官方文件(https://htmx.org/docs/#trigger-filters)