HTMX est le successeur d'intercooler.js, car il est utilisé pour étendre le HTML avec des commandes HTTP sans avoir besoin d'écrire une API. Maintenant, je sais qu'au début, j'ai dit que je supprimais les couches d'abstraction, mais je suis plutôt un programmeur de systèmes/outils, donc j'ai encore besoin de quelques abstractions jusqu'à ce que j'aie une idée de ce qui se passe réellement en dessous.
HTMX déploie des commandes AJAX pour modifier un élément. Ceci est similaire au fonctionnement de ReactJs. ReactJs permet de mettre à jour le contenu, et HTMX le fait pour HTML.
Une simple doublure est ajoutée à ./internal/views/layout.templ
élément.Ceci était déjà inclus dans le dépôt, mais il a été mis à jour pour vérifier le script.
HTMX est livré avec tous vos mots-clés préférés suivis de 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
Il y en a d'autres, mais ce sont les principaux utilisés dans ce projet.
Pour un test simple, dans ./internal/views/components/logo.templ, à l'intérieur de l'ouverture tag, nous allons ajouter hx-get="/" et hx-trigger="click".
Ouvrez votre terminal et exécutez :
templ generate go run ./cmd/server/main.go
Maintenant, allez dans votre navigateur et allez sur localhost :[VOTRE PORT]/. Cliquez sur Gopher, et vous devriez voir... eh bien, c'est arrivé si vite que vous ne l'avez probablement pas remarqué. C'est bon. Ouvrez les outils de développement et accédez à l'onglet Inspecteur. Cliquez à nouveau sur le Gopher. Vous devriez remarquer la mise à jour dans le code HTML dans l'onglet inspecteur.
C'est le pain et le beurre du HTMX. C'est ce qui nous donne l'UI/UX réactif que nous recherchons. Désormais, hx-swap, bien que simple dans son nom, nécessite un examen attentif de son emplacement. Je veux dire par là, ne le placez pas là où il interférera avec d'autres éléments.
Exemple :
<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
Placer tout le contrôle sur le bouton, entraînera tout effacer et empêchera l'affichage d'un bouton, de mise à jour. Cependant, si nous déplaçons une partie du travail vers le conteneur :
<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
Maintenant, lorsque nous cliquons sur le bouton, seules les données À L'INTÉRIEUR du conteneur sont modifiées, sauf qu'il existe désormais un bouton pour une modification ultérieure.
Je m'arrête ici pour deux (2) raisons.
Tout d’abord, vous pouvez utiliser HTML et personnaliser votre site tel quel. Deuxièmement, nous pouvons renvoyer du code HTML avec une http.Reponse. Par extension, nous pouvons également transmettre des composants templ. Voyez-vous où cela mène ?
Une restructuration complète et un déplacement des fonctionnalités vers go handlerFunc()s.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!