HTMX 與 Django 實現局部更新與後端渲染
功能概述
此功能實現了一個按讚(收藏)按鈕,使用者可以對特定的項目(如面試記錄)進行按讚或取消按讚操作。按鈕的狀態(已收藏或收藏)由後端決定,並通過 HTMX 局部更新頁面。
技術細節
1. 前端模板設計
favorite.html
這個模板負責渲染按讚按鈕,按鈕的狀態根據使用者是否已經按讚來決定。
{% if user in interview.favorited_by.all %}
{% else %}
{% endif %}
hx-post
: 當按鈕被點擊時,發送一個 POST 請求到指定的 URL。hx-swap="outerHTML"
: 指定 HTMX 替換整個按鈕的 HTML,而不僅僅是按鈕內的內容。- 按鈕狀態: 使用 Django 模板語法 `