SuperAPI AI 工具集

htmx-patterns

通用与其它

查看项目

更新于 10-16 01:49

技能介绍

该技能用于在 Django 项目中使用 HTMX 构建交互式界面。核心理念是服务端返回 HTML 片段而非 JSON,通过 _partial.html 局部模板做动态更新,并保持渐进增强,使页面在无 JavaScript 时仍可用。

主要能力与用法:在视图中用 request.headers.get("HX-Request") 判断 HTMX 请求,返回局部模板,否则返回完整页面;处理表单时校验成功返回新数据局部,失败返回带错误的表单局部;可借助 HX-Trigger、HX-Redirect、HX-Retarget/HX-Reswap、HX-Refresh 等响应头控制客户端行为。模板约定局部文件名加下划线前缀,完整页面继承 base.html 并包含局部,局部应聚焦单一 UI 组件。

UX 建议:用 hx-indicator 显示加载状态,用 Django messages 提供反馈,返回正确状态码(如校验错误 400),并用 hx-disabled-elt="this" 防止重复提交。CSRF 已在基础模板 body 的 hx-headers 中全局配置。

常见陷阱包括缺少加载指示、向 HTMX 请求返回完整页面、未处理表单错误、未禁用按钮以及 N+1 查询。资料还提到可与 django-templates、django-forms、django-extensions、pytest-django-patterns 等技能配合。具体价格、平台与版本信息暂未提供。