Day6 - HTMX AJAX 提供的各種屬性操作（三）

Genos
2023-09-21 23:46:27

渲染對象

如果 API 請求後要把 Response 渲染到畫面上，可以使用 hx-target="CSS 選取器" 來指定要渲染到哪個元素上，如果沒有設定這個屬性的話，會直接渲染在觸發 API 事件的元素上，官方範例如下：

// API 的回應會被渲染到 id 是 search-results 的 div 裡面
<input type="text" name="q"
    hx-get="/trigger_delay"
    hx-trigger="keyup delay:500ms changed"
    hx-target="#search-results"
    placeholder="Search..."
>


延伸選取器

hx-target 提供了一些特別的 keyword 來達成其他的選取方式

this: 表示有 hx-target 属性的元素就是目標元素

closest <CSS selector>: 離 CSS 選取器 最近的父元素或是本身

next <CSS selector>: CSS 選取器 選到元素的下一個元素

previous <CSS selector>: CSS 選取器 選到元素的前一個元素

find <CSS selector>: CSS 選取器 選到元素的第一個子元素

渲染方式

使用 hx-swap 來決定選染到指定元素的方式，有幾種方式可以使用：

innerHTML: 預設值，渲染在指定元素內

outerHTML: Response 的內容會取代指定元素

afterbegin: 渲染到指定元素的子層，在第一個子元素之前

beforebegin: 選染到指定元素的父層，在指定元素之前

beforeend: 渲染到指定元素的子層，在最後一個子元素之後

afterend: 選染到指定元素的父層，在指定元素之後

delete: 不管回傳什麼都會把指定元素移除

none: 不渲染