Dies war bereits im Repo enthalten, wurde jedoch aktualisiert, um das Skript zu überprüfen.
HTMX enthält alle Ihre Lieblingsschlüsselwörter mit angehängtem 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
Es gibt noch mehr, dies sind jedoch die wichtigsten, die in diesem Projekt verwendet werden.
Für einen einfachen Test fügen wir in ./internal/views/components/logo.templ innerhalb des öffnenden -Tags hx-get=\\\"/\\\" und hx-trigger=\\\"click hinzu \\\".
Öffnen Sie Ihr Terminal und führen Sie Folgendes aus:
templ generatego run ./cmd/server/main.go
Gehen Sie nun zu Ihrem Browser und gehen Sie zu localhost:[IHR PORT]/. Klicken Sie auf Gopher, und Sie sollten sehen ... nun, es ging so schnell, dass Sie es wahrscheinlich nicht bemerkt haben. Das ist in Ordnung. Öffnen Sie die Entwicklertools und wechseln Sie zur Registerkarte „Inspektor“. Klicken Sie erneut auf den Gopher. Sie sollten die Aktualisierung im HTML auf der Registerkarte „Inspektor“ bemerken.
Das ist das A und O von HTMX. Dadurch erhalten wir die reaktionsfähige Benutzeroberfläche/UX, die wir suchen. Obwohl der Name hx-swap einfach ist, muss der Standort sorgfältig überlegt werden. Damit meine ich, platzieren Sie es nicht dort, wo es andere Elemente stört.
Beispiel:
// container // end actorWenn Sie das gesamte Steuerelement auf die Schaltfläche legen, wird alles gelöscht und es wird verhindert, dass eine Schaltfläche zum Aktualisieren angezeigt wird. Wenn wir jedoch einen Teil der Arbeit in den Container verschieben:
// container// end actor Wenn wir nun auf die Schaltfläche klicken, werden nur die Daten INNERHALB des Containers geändert, außer dass jetzt eine Schaltfläche zur weiteren Bearbeitung vorhanden ist.
Nachtrag
Ich höre hier aus zwei (2) Gründen auf.
Erstens können Sie HTML verwenden und Ihre Website damit so anpassen, wie sie ist. Zweitens können wir HTML-Code mit einer http.Reponse zurückgeben. Als Erweiterung können wir auch Templ-Komponenten übergeben. Sehen Sie, wohin das führt?Demnächst verfügbar
Eine vollständige Umstrukturierung und Verlagerung der Funktionalität in 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"}}
„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“HTMX zu GO hinzufügen
Veröffentlicht am 07.11.2024Durchsuche:165
HTMX ist der Nachfolger von intercooler.js und wird verwendet, um HTML mit HTTP-Befehlen zu erweitern, ohne dass eine API geschrieben werden muss. Nun weiß ich, dass ich am Anfang gesagt habe, ich würde Abstraktionsebenen entfernen, aber ich bin eher ein System-/Tool-Programmierer, also brauche ich noch ein paar Abstraktionen, bis ich verstanden habe, was tatsächlich darunter passiert.
Grundkonzept
HTMX stellt AJAX-Befehle bereit, um ein Element zu ändern. Dies ähnelt der Funktionsweise von ReactJs. ReactJs ermöglicht die Aktualisierung von Inhalten, und HTMX erfüllt dies für HTML.
HTML importieren
Ein einfacher Einzeiler wird dem ./internal/views/layout.templ
-Element hinzugefügt.
Dies war bereits im Repo enthalten, wurde jedoch aktualisiert, um das Skript zu überprüfen.
Verwendung von HTML
HTMX enthält alle Ihre Lieblingsschlüsselwörter mit angehängtem 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 functionEs gibt noch mehr, dies sind jedoch die wichtigsten, die in diesem Projekt verwendet werden.
Für einen einfachen Test fügen wir in ./internal/views/components/logo.templ innerhalb des öffnenden
-Tags hx-get="/" und hx-trigger="click hinzu ".
Öffnen Sie Ihr Terminal und führen Sie Folgendes aus:
templ generate go run ./cmd/server/main.goGehen Sie nun zu Ihrem Browser und gehen Sie zu localhost:[IHR PORT]/. Klicken Sie auf Gopher, und Sie sollten sehen ... nun, es ging so schnell, dass Sie es wahrscheinlich nicht bemerkt haben. Das ist in Ordnung. Öffnen Sie die Entwicklertools und wechseln Sie zur Registerkarte „Inspektor“. Klicken Sie erneut auf den Gopher. Sie sollten die Aktualisierung im HTML auf der Registerkarte „Inspektor“ bemerken.
HX-SWAP
Das ist das A und O von HTMX. Dadurch erhalten wir die reaktionsfähige Benutzeroberfläche/UX, die wir suchen. Obwohl der Name hx-swap einfach ist, muss der Standort sorgfältig überlegt werden. Damit meine ich, platzieren Sie es nicht dort, wo es andere Elemente stört.
Beispiel:
// container // end actor// end-containerWenn Sie das gesamte Steuerelement auf die Schaltfläche legen, wird alles gelöscht und es wird verhindert, dass eine Schaltfläche zum Aktualisieren angezeigt wird. Wenn wir jedoch einen Teil der Arbeit in den Container verschieben:
// container// end-container// end actor Wenn wir nun auf die Schaltfläche klicken, werden nur die Daten INNERHALB des Containers geändert, außer dass jetzt eine Schaltfläche zur weiteren Bearbeitung vorhanden ist.
Nachtrag
Ich höre hier aus zwei (2) Gründen auf.
Erstens können Sie HTML verwenden und Ihre Website damit so anpassen, wie sie ist. Zweitens können wir HTML-Code mit einer http.Reponse zurückgeben. Als Erweiterung können wir auch Templ-Komponenten übergeben. Sehen Sie, wohin das führt?Demnächst verfügbar
Eine vollständige Umstrukturierung und Verlagerung der Funktionalität in go handlerFunc()s.
Freigabeerklärung Dieser Artikel ist abgedruckt unter: https://dev.to/caffeineordeath/adding-htmx-to-go-2cah?1 Bei Verstößen wenden Sie sich bitte an [email protected], um ihn zu löschenNeuestes Tutorial Mehr>
Wie beheben Sie die "ungültige Verwendung der Gruppenfunktion" in MySQL beim Finden der Maximalzahl?wie man die maximale zählende mit mysql in mysql abrufen Wählen Sie max (count (*)) aus der Emp1 -Gruppe nach Namen; ERROR 1111 (HY000): Ungül...Programmierung Gepostet am 2025-07-20Chinesisch lernen
- 1 Wie sagt man „gehen“ auf Chinesisch? 走路 Chinesische Aussprache, 走路 Chinesisch lernen
- 2 Wie sagt man auf Chinesisch „Flugzeug nehmen“? 坐飞机 Chinesische Aussprache, 坐飞机 Chinesisch lernen
- 3 Wie sagt man auf Chinesisch „einen Zug nehmen“? 坐火车 Chinesische Aussprache, 坐火车 Chinesisch lernen
- 4 Wie sagt man auf Chinesisch „Bus nehmen“? 坐车 Chinesische Aussprache, 坐车 Chinesisch lernen
- 5 Wie sagt man „Fahren“ auf Chinesisch? 开车 Chinesische Aussprache, 开车 Chinesisch lernen
- 6 Wie sagt man Schwimmen auf Chinesisch? 游泳 Chinesische Aussprache, 游泳 Chinesisch lernen
- 7 Wie sagt man auf Chinesisch „Fahrrad fahren“? 骑自行车 Chinesische Aussprache, 骑自行车 Chinesisch lernen
- 8 Wie sagt man auf Chinesisch Hallo? 你好Chinesische Aussprache, 你好Chinesisch lernen
- 9 Wie sagt man „Danke“ auf Chinesisch? 谢谢Chinesische Aussprache, 谢谢Chinesisch lernen
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
Bildbase64-Dekodierung
Chinesisches Pinyin
Unicode-Kodierung
Komprimierung der JS-Verschleierungsverschlüsselung
URL-Hexadezimal-Verschlüsselungstool
Konvertierungstool für UTF-8-Kodierung
Online-Tools zur ASCII-Kodierung und -Dekodierung
MD5-Verschlüsselungstool
Hash/Hash-Text-Online-Verschlüsselungs- und Entschlüsselungstool
Online-SHA-VerschlüsselungHaftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.
Copyright© 2022 湘ICP备2022001581号-3
![\\\"Adding](\\\"/uploads/20241005/17281148536700f0a57c124.jpg\\\")
