Esto ya estaba incluido en el repositorio, sin embargo, se actualizó para verificar el script.
HTMX viene con todas tus palabras clave favoritas adjuntas con 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
Hay más, sin embargo estos son los principales utilizados en este proyecto.
Para una prueba simple, en ./internal/views/components/logo.templ, dentro de la etiqueta de apertura, agregaremos hx-get=\\\"/\\\" y hx-trigger=\\\"click \\\".
Abre tu terminal y ejecuta:
templ generatego run ./cmd/server/main.go
Ahora ve a tu navegador y ve a localhost:[TU PUERTO]/. Haga clic en Gopher y debería ver... bueno, sucedió tan rápido que probablemente no se dio cuenta. Está bien. Abra las herramientas de desarrollador y vaya a la pestaña del inspector. Haga clic en la tuza nuevamente. Deberías notar la actualización en el HTML en la pestaña del inspector.
Este es el pan y la mantequilla de HTMX. Esto es lo que nos brinda la UI/UX responsiva que estamos buscando. Ahora bien, hx-swap, aunque de nombre simple, necesita una cuidadosa consideración en cuanto a su ubicación. Con esto quiero decir, no lo coloques donde pueda interferir con otros elementos.
Ejemplo:
// container // end actorColocar todo el control en el botón hará que todo se borre y evitará que se muestre un botón para actualizar. Sin embargo, si trasladamos parte del trabajo al contenedor:
// container// end actor Ahora, cuando hacemos clic en el botón, solo se cambian los datos DENTRO del contenedor, excepto que ahora existe un botón para editar más.
Apéndice
Me detengo aquí por dos (2) razones.
Primero, puede usar htmx y personalizar su sitio tal como está. En segundo lugar, podemos devolver código html con http.Reponse. Por extensión, también podemos pasar componentes temp. ¿Ves hacia dónde va esto?Muy pronto
Una reestructuración completa y una funcionalidad de traslado a 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"}}
"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"Agregar HTMX a GO
Publicado el 2024-11-07Navegar:386
HTMX es el sucesor de intercooler.js, ya que se utiliza para extender HTML con comandos HTTP sin necesidad de escribir una API. Ahora, sé que al principio dije que estaba eliminando capas de abstracción, sin embargo, soy más un programador de sistemas/herramientas, por lo que todavía necesito algunas abstracciones hasta que entienda lo que realmente está sucediendo debajo.
Concepto básico
HTMX implementa comandos AJAX para modificar un elemento. Esto es similar a cómo funciona ReactJs. ReactJs permite actualizar contenido y HTMX lo hace para HTML.
Importar HTML
Se agrega una línea simple al elemento ./internal/views/layout.templ
.
Esto ya estaba incluido en el repositorio, sin embargo, se actualizó para verificar el script.
UsandoHTMX
HTMX viene con todas tus palabras clave favoritas adjuntas con 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 functionHay más, sin embargo estos son los principales utilizados en este proyecto.
Para una prueba simple, en ./internal/views/components/logo.templ, dentro de la etiqueta
de apertura, agregaremos hx-get="/" y hx-trigger="click ".
Abre tu terminal y ejecuta:
templ generate go run ./cmd/server/main.goAhora ve a tu navegador y ve a localhost:[TU PUERTO]/. Haga clic en Gopher y debería ver... bueno, sucedió tan rápido que probablemente no se dio cuenta. Está bien. Abra las herramientas de desarrollador y vaya a la pestaña del inspector. Haga clic en la tuza nuevamente. Deberías notar la actualización en el HTML en la pestaña del inspector.
HX-SWAP
Este es el pan y la mantequilla de HTMX. Esto es lo que nos brinda la UI/UX responsiva que estamos buscando. Ahora bien, hx-swap, aunque de nombre simple, necesita una cuidadosa consideración en cuanto a su ubicación. Con esto quiero decir, no lo coloques donde pueda interferir con otros elementos.
Ejemplo:
// container // end actor// end-containerColocar todo el control en el botón hará que todo se borre y evitará que se muestre un botón para actualizar. Sin embargo, si trasladamos parte del trabajo al contenedor:
// container// end-container// end actor Ahora, cuando hacemos clic en el botón, solo se cambian los datos DENTRO del contenedor, excepto que ahora existe un botón para editar más.
Apéndice
Me detengo aquí por dos (2) razones.
Primero, puede usar htmx y personalizar su sitio tal como está. En segundo lugar, podemos devolver código html con http.Reponse. Por extensión, también podemos pasar componentes temp. ¿Ves hacia dónde va esto?Muy pronto
Una reestructuración completa y una funcionalidad de traslado a go handlerFunc()s.
Declaración de liberación Este artículo se reproduce en: https://dev.to/caffeineordeath/adding-htmx-to-go-2cah?1 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.Último tutorial Más>
¿Por qué Microsoft Visual C ++ no implementa correctamente la instanciación de la plantilla de dos fases?El misterio de la plantilla de dos fases "roto" instanciación en Microsoft Visual c declaración de problemas: usuarios comúnmente ...Programación Publicado el 2025-03-12Estudiar chino
- 1 ¿Cómo se dice "caminar" en chino? 走路 pronunciación china, 走路 aprendizaje chino
- 2 ¿Cómo se dice "tomar un avión" en chino? 坐飞机 pronunciación china, 坐飞机 aprendizaje chino
- 3 ¿Cómo se dice "tomar un tren" en chino? 坐火车 pronunciación china, 坐火车 aprendizaje chino
- 4 ¿Cómo se dice "tomar un autobús" en chino? 坐车 pronunciación china, 坐车 aprendizaje chino
- 5 ¿Cómo se dice conducir en chino? 开车 pronunciación china, 开车 aprendizaje chino
- 6 ¿Cómo se dice nadar en chino? 游泳 pronunciación china, 游泳 aprendizaje chino
- 7 ¿Cómo se dice andar en bicicleta en chino? 骑自行车 pronunciación china, 骑自行车 aprendizaje chino
- 8 ¿Cómo se dice hola en chino? 你好Pronunciación china, 你好Aprendizaje chino
- 9 ¿Cómo se dice gracias en chino? 谢谢Pronunciación china, 谢谢Aprendizaje chino
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
Decodificación de imagen base64
pinyin chino
Codificación Unicode
Compresión de cifrado de ofuscación JS
Herramienta de cifrado hexadecimal de URL
Herramienta de conversión de codificación UTF-8
Herramientas de codificación y decodificación Ascii en línea
herramienta de cifrado MD5
Herramienta de cifrado y descifrado de texto hash/hash en línea
Cifrado SHA en líneaDescargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.
Copyright© 2022 湘ICP备2022001581号-3
![\\\"Adding](\\\"/uploads/20241005/17281148536700f0a57c124.jpg\\\")
