將 HTMX 加入 GO-Golang-PHP中文網

將 HTMX 加入 GO

Barbara Streisand

發布： 2024-09-29 06:09:02

原創

1039 人瀏覽過

HTMX 是 intercooler.js 的後繼者，用於使用 HTTP 命令擴充 HTML，而無需編寫 API。現在，我知道一開始我說我要刪除抽象層，但是我更多的是系統/工具程式設計師，所以我仍然需要一些抽象，直到我掌握了底層實際發生的情況。

基本概念

HTMX 部署 AJAX 指令來修改元素。這與 ReactJs 的工作原理類似。 ReactJs 允許更新內容，而 HTMX 則滿足了 HTML 的要求。

導入HTMX

在 ./internal/views/layout.templ

中加入了一個簡單的襯墊。元素。
這已包含在儲存庫中，但已更新以驗證腳本。

使用HTMX

HTMX 附帶所有您最喜歡的關鍵字，並附加 hx-。

# General format is hx-[verb]
hx-get        # HTTP GET
hx-post       # HTTP POST
hx-put        # HTTP PUT
hx-patch      # HTTP PATCH
hx-delete     # HTTP DELETE
hx-swap       # update content of an element
hx-target     # specify element to affect
hx-trigger    # action that executes function

登入後複製

還有更多，但這些是本項目中使用的主要內容。

為了進行簡單測試，在 ./internal/views/components/logo.templ 中，打開將 HTMX 加入 GO

內部標籤，我們將添加 hx-get="/" 和 hx-trigger="click"。

開啟終端機並運作：

templ generate
go run ./cmd/server/main.go

登入後複製

現在前往您的瀏覽器並前往 localhost:[您的連接埠]/。點擊 Gopher，您應該會看到...好吧，它發生得太快了，您可能沒有註意到。沒關係。開啟開發者工具，然後轉到檢查器標籤。再次單擊地鼠。您應該注意到檢查器標籤中 HTML 的更新。

HX交換

這是 HTMX 的麵包和奶油。這就是我們正在尋找的響應式 UI/UX 的原因。現在，hx-swap 雖然名稱很簡單，但需要仔細考慮它的位置。我的意思是，不要把它放在會幹擾其他元素的地方。

例：

<div > // container
    <button hx-delete="[endpoint]"
        hx-target="nearest [element]" hx-swap="outerHTML" hx-get="[endpoint]" hx-target="this"> // actor
    </button> // end actor
</div // end-container

登入後複製

將所有控制項放在按鈕上，將導致所有內容被擦除並阻止按鈕更新、顯示。但是，如果我們將一些工作移至容器中：

<div  hx-get="[endpoint]" hx-target="this"> // container
    <li>
        <button hx-delete="[endpoint]"
            hx-target="nearest [element]" hx-swap="outerHTML"> // actor
        </button> // end actor
    </li>
</div // end-container

登入後複製

現在，當我們單擊按鈕時，只會更改容器內部的數據，除了現在存在進一步編輯的按鈕。

附錄

我在這裡停下來有兩 (2) 個原因。

首先，您可以使用 htmx 並按原樣自訂您的網站。其次，我們可以使用 http.Reponse 回傳 html 程式碼。透過擴展，我們也可以傳遞 templ 組件。你知道這是怎麼回事嗎？

即將推出

整個重組並將功能轉移到 go handlerFunc() 中。

Adding HTMX to GO