SuperAPI AI 工具集

hotwire-patterns

通用与其它

查看项目

更新于 10-15 20:34

技能介绍

用途:该资料是 Rails 8 下 Hotwire(HTML Over The Wire)的模式参考,目标是用较少 JavaScript 构建现代 Web 应用。

主要能力:介绍四个组成部分——Turbo Drive 负责类 SPA 导航(无需代码);Turbo Frames 做局部页面更新,适合行内编辑、标签内容、模态框、无限滚动;Turbo Streams 做实时 DOM 更新,适合实时信息流、flash 消息;Stimulus 处理少量 JavaScript 交互,如显隐切换、表单校验。资料给出场景到模式的对照表,并附 turbo-frames.md、turbo-streams.md、stimulus.md、tailwind-integration.md 等参考文件。

使用方式:Turbo Frames 用 turbo_frame_tag 包裹内容,行内编辑时在编辑视图复用同一 frame id,懒加载用 src 与 loading: :lazy。Turbo Streams 在控制器对应模板中使用 turbo_stream.prepend/append/replace/update/remove 等动作,flash 可通过 after_action 在 turbo_stream 请求下转换。Stimulus 控制器以 import { Controller } from "@hotwired/stimulus" 定义,声明 static targets,并在 HTML 中用 data-controller、data-action、data-*-target 绑定。

测试与调试:可用集成测试断言响应媒体类型为 text/vnd.turbo-stream.html 且响应体含 turbo-stream,用系统测试验证行内编辑与评论添加;调试要点包括 frame id 是否完全匹配、Accept 头是否含 turbo-stream、Stimulus 控制器名与文件名是否一致、事件是否写成 data-action="event->controller#method"。

适用场景与限制:适合 Rails 8 项目中的交互式 UI、实时更新与表单处理。资料未提供安装命令、版本依赖、收费或性能数据,相关事实暂未提供。