HTMX使我們能夠僅透過簡單的HTML屬性來構建強大的動態網頁應用程式。在這一篇中，我們將探討HTMX的高級功能，並通過hx-trigger、事件觸發、動態數據處理等實際應用案例來擴展HTMX的可能性。

HTMX與Django整合的高級功能

而在最後的第6篇中，我們將以伺服器與客戶端之間的回應處理技巧為中心，總結利用HTMX和Django進行完善的動態網頁開發流程。

1. HTMX的高級功能介紹

HTMX的高級功能讓動態數據處理變得更加靈活和強大。以下是此次文章將探討的主要功能：

  • hx-trigger: 設定特定事件作為觸發器來發送請求。
  • hx-params: 自訂請求時傳遞的數據。
  • hx-swap: 設定將伺服器回應數據插入到DOM中的方式。
  • 條件性觸發: 根據條件靈活處理操作。

2. hx-trigger: 事件驅動的請求

hx-trigger可以設置特定事件作為觸發器來發送伺服器請求。基本上會使用點擊事件（click），但可自由更改。

基本使用示例

<input hx-get="/search/" hx-trigger="keyup changed delay:500ms" hx-target="#results" placeholder="輸入關鍵字">
<div id="results">搜尋結果將顯示在這裡.</div>

主要重點

  • keyup: 每當鍵入時發送請求。
  • changed: 只有在輸入值變更時才發送請求。
  • delay: 將請求延遲500毫秒發送。
  • hx-target: 指定插入伺服器回應數據的元素。

3. hx-params: 控制要傳送的數據

hx-params允許自訂要發送到伺服器的數據。

  • 可以排除特定數據，或僅發送所需的數據。

示例: 只傳送特定欄位

<form hx-post="/submit/" hx-params="username,email" hx-target="#result">
    <input type="text" name="username" placeholder="使用者名稱">
    <input type="email" name="email" placeholder="電子郵件">
    <input type="password" name="password" placeholder="密碼">
    <button type="submit">提交</button>
</form>
<div id="result">結果將顯示在這裡.</div>

在上述代碼中，僅有username和email欄位會被傳送到伺服器，而password則被排除。

4. hx-swap: 控制回應數據的插入方式

hx-swap設定將伺服器回應數據插入DOM的方式。預設值為innerHTML，會替換掉原有內容。

主要選項

  • innerHTML: 預設值，替換現有內容。
  • beforebegin: 插入在元素之前。
  • afterbegin: 插入到元素內部的最前端。
  • beforeend: 插入到元素內部的最後。
  • afterend: 插入在元素之後。

使用示例

<div id="content">
    <p>現有內容</p>
</div>
<button hx-get="/new-content/" hx-swap="beforeend" hx-target="#content">添加內容</button>

點擊時，來自/new-content/的回應數據將插入到<div id="content">內部的最後。

5. 條件性觸發

HTMX可以根據條件觸發請求。通過這種方式，可以更細緻地控制用戶介面的互動。

示例: 根據檢查框的選取狀態發送請求

<input type="checkbox" id="confirm" hx-get="/confirm/" hx-target="#message" hx-trigger="change:checked">
<div id="message"></div>

僅在檢查框被選取時發送到/confirm/的請求。

6. 實作: 使用HTMX實現動態篩選

HTML代碼

<select hx-get="/filter/" hx-trigger="change" hx-target="#results">
    <option value="all">全部</option>
    <option value="category1">類別 1</option>
    <option value="category2">類別 2</option>
</select>
<div id="results">篩選結果將顯示在這裡.</div>

Django視圖

from django.http import JsonResponse

def filter_view(request):
    category = request.GET.get("category", "all")
    results = {
        "all": ["所有項目 1", "所有項目 2"],
        "category1": ["類別 1 項目 1", "類別 1 項目 2"],
        "category2": ["類別 2 項目 1", "類別 2 項目 2"],
    }
    return JsonResponse({"results": results.get(category, [])})

本篇結束

在本篇中，我們探討了如何通過HTMX的高級功能來擴展與Django的整合。

下一篇將是最後一篇，主要聚焦於伺服器和客戶端之間的回應處理技巧，將涵蓋實用的開發技巧和優化方案。敬請期待！😊