SuperAPI AI 工具集

templ-htmx

通用与其它

查看项目

更新于 10-16 01:27

技能介绍

用途:在 templ 模板中集成 HTMX,构建服务端驱动的交互式超媒体应用,适用于动态界面、实时更新与 AJAX 交互。

主要能力:按渐进式披露组织,先跑通一个交互,再扩展到高级行为。第一层为最小可用流程:在服务端设置中挂载 HTMX 资源(htmx.Mount(mux)),在布局中包含 HTMX 脚本(@htmx.Use()),在组件上添加 hx-* 属性,处理器返回局部组件,并通过 HTMX 请求检测区分整页与片段响应。示例使用 import "xeiaso.net/v4/web/htmx"。

第二层为核心控件:hx-get/hx-post 触发请求,hx-target 指定响应落点,hx-swap 选择替换策略(innerHTML、outerHTML、beforeend),hx-trigger 控制事件时机(click、change、every 5s 等),hx-indicator 显示加载状态。

第三层为高级服务端模式:用 htmx.Is(r) 检测 HTMX 请求并返回片段,使用带外更新刷新多个区域,用响应头(HX-Trigger、HX-Redirect)控制客户端行为,并保持渐进增强,使端点在无 JS 时仍可用。

可升级到其他技能:需要处理器/路由结构用 templ-http,需要可复用组件 API 用 templ-components,需要模板语法帮助用 templ-syntax。

限制与说明:资料仅给出上述用法,未提供收费、价格、支持平台或效果保证等信息。参考文档包括 resources/quick-start.md、resources/interaction-patterns.md、resources/advanced-responses.md,以及 HTMX 文档 https://htmx.org/docs/ 和 Hypermedia Systems https://hypermedia.systems/。