Ajout de HTML à GO

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.

Concept de base

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.

Importer du 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.

Utiliser HTML

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.

HX-SWAP

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.

Addenda

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 ?

À venir

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!