This was already included in the repo, however it has been updated to verify the script.
HTMX comes with all of your favorite keywords appended with hx-.
# General format is hx-[verb]hx-get # HTTP GEThx-post # HTTP POSThx-put # HTTP PUThx-patch # HTTP PATCHhx-delete # HTTP DELETEhx-swap # update content of an elementhx-target # specify element to affecthx-trigger # action that executes function
There are more, however these are the main ones used in this project.
For a simple test, in ./internal/views/components/logo.templ, inside of the opening tag, we're going to add hx-get=\\\"/\\\" and hx-trigger=\\\"click\\\".
Open your terminal and run:
templ generatego run ./cmd/server/main.go
Now go to your browser and go to localhost:[YOUR PORT]/. Click on Gopher, and you should see... well, it happened so fast, you probably didn't notice. That's okay. Open the developer tools, and go to the inspector tab. Click the Gopher again. You should notice the update in the HTML in the inspector tab.
This is the bread and butter of HTMX. This is what gives us the responsive UI/UX we're looking for. Now, hx-swap, while simple in name, needs careful consideration on it's location. By this, I mean, do not put it where it will interfere with other elements.
Example:
// container // end actorPlacing all of the control on the button, will cause everything to be erased and prevent a button, for updating, being displayed. However, if we move some of the work to the container:
// container// end actor Now, when we click the button, only the data INSIDE of the container is changed, except now a button exists for further editing.
Addendum
I'm stopping here for two (2) reasons.
First, you can use htmx and customize your site with it as it is. Second, we can return html code with a http.Reponse. By extension, we can pass templ components as well. Do you see where this is going?Coming Soon
An entire restructure and moving functionality into go handlerFunc()s.
","image":"http://www.luping.net/uploads/20241005/17281148536700f0a57a72a.png","datePublished":"2024-11-07T13:21:30+08:00","dateModified":"2024-11-07T13:21:30+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"Adding HTMX to GO
Published on 2024-11-07Browse:615
HTMX is the successor to intercooler.js, as is used to extend HTML with HTTP commands without needing to write an API. Now, I know in the beginning I said I was removing abstraction layers, however I'm more of systems/tooling programmer, so I still need some abstractions until I have a grasp of what is actually happening underneath.
Basic Concept
HTMX deploys AJAX commands to modify an element. This is similar to how ReactJs works. ReactJs allows for updating content, and HTMX is fulfilling that for HTML.
Import HTMX
A simple one liner is added to ./internal/views/layout.templ
element.This was already included in the repo, however it has been updated to verify the script.
Using HTMX
HTMX comes with all of your favorite keywords appended with 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 functionThere are more, however these are the main ones used in this project.
For a simple test, in ./internal/views/components/logo.templ, inside of the opening
tag, we're going to add hx-get="/" and hx-trigger="click".
Open your terminal and run:
templ generate go run ./cmd/server/main.goNow go to your browser and go to localhost:[YOUR PORT]/. Click on Gopher, and you should see... well, it happened so fast, you probably didn't notice. That's okay. Open the developer tools, and go to the inspector tab. Click the Gopher again. You should notice the update in the HTML in the inspector tab.
HX-SWAP
This is the bread and butter of HTMX. This is what gives us the responsive UI/UX we're looking for. Now, hx-swap, while simple in name, needs careful consideration on it's location. By this, I mean, do not put it where it will interfere with other elements.
Example:// container // end actor// end-containerPlacing all of the control on the button, will cause everything to be erased and prevent a button, for updating, being displayed. However, if we move some of the work to the container:
// container// end-container// end actor Now, when we click the button, only the data INSIDE of the container is changed, except now a button exists for further editing.
Addendum
I'm stopping here for two (2) reasons.
First, you can use htmx and customize your site with it as it is. Second, we can return html code with a http.Reponse. By extension, we can pass templ components as well. Do you see where this is going?Coming Soon
An entire restructure and moving functionality into go handlerFunc()s.
Release Statement This article is reproduced at: https://dev.to/caffeineordeath/adding-htmx-to-go-2cah?1 If there is any infringement, please contact [email protected] to delete itLatest tutorial More>
How Does Floyd\'s Algorithm Detect Loops in Linked Lists?Detecting Loops in Linked Lists Using Floyd's AlgorithmDetermining whether a given linked list contains a loop can be a challenging task in Java p...Programming Published on 2024-11-07Study Chinese
- 1 How do you say "walk" in Chinese? 走路 Chinese pronunciation, 走路 Chinese learning
- 2 How do you say "take a plane" in Chinese? 坐飞机 Chinese pronunciation, 坐飞机 Chinese learning
- 3 How do you say "take a train" in Chinese? 坐火车 Chinese pronunciation, 坐火车 Chinese learning
- 4 How do you say "take a bus" in Chinese? 坐车 Chinese pronunciation, 坐车 Chinese learning
- 5 How to say drive in Chinese? 开车 Chinese pronunciation, 开车 Chinese learning
- 6 How do you say swimming in Chinese? 游泳 Chinese pronunciation, 游泳 Chinese learning
- 7 How do you say ride a bicycle in Chinese? 骑自行车 Chinese pronunciation, 骑自行车 Chinese learning
- 8 How do you say hello in Chinese? 你好Chinese pronunciation, 你好Chinese learning
- 9 How do you say thank you in Chinese? 谢谢Chinese pronunciation, 谢谢Chinese learning
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.
Copyright© 2022 湘ICP备2022001581号-3
![\\\"Adding](\\\"/uploads/20241005/17281148536700f0a57c124.jpg\\\")
