# Rails 8 的热线模式 ## 概述 Hotwire = HTML Over The Wire - 无需编写太多 JavaScript 即可构建现代 Web 应用程序。组件|目的|使用案例 ---|---|--- **涡轮驱动** | SPA般的导航|自动，无需代码 **涡轮框架** |部分页面更新 |内联编辑、选项卡式内容 **涡轮流** |实时 DOM 更新 |实时更新、快讯 **刺激** | JavaScript 洒水|切换、表单、交互 ## 快速入门 ### Turbo Frames（范围导航） <%# app/views/posts/index.html.erb %> <%=turbo_frame_tag“帖子”执行%> <%= 渲染@posts %> <%= link_to "加载更多", posts_path(页: 2) %> <％结束％> <%# 单击“加载更多”仅更新此框架内的内容 %> ### Turbo Streams（实时更新） <%# app/views/posts/create.turbo_stream.erb %> <%=turbo_stream.prepend“帖子”，@post%> <%=turbo_stream.update“闪存”，部分：“共享/闪存”%> ### 刺激控制器 // 应用程序/javascript/controllers/toggle_controller.js 从“@hotwired/stimulus”导入{控制器} 导出默认类扩展控制器{ 静态目标 = [“内容”] 切换（）{ this.contentTarget.classList.toggle("隐藏") } }

隐藏内容

## 工作流程清单热线实施： - [ ] 确定更新范围（整页与部分） - [ ] 选择模式（帧 vs 流 vs 刺激） - [ ] 实现服务器响应 - [ ] 添加客户端标记 - [ ] 使用和不使用 JavaScript 进行测试 - [ ] 写入系统规格 ## 何时使用每种模式场景|图案|为什么 ---|---|--- 内联编辑 |涡轮框架|范围替换表格提交 |涡轮流 |多次更新实时动态 | Turbo Stream + 行动电缆 |推送更新切换可见性 |刺激|无需服务器表单验证 |刺激 |客户端反馈无限滚动 | Turbo Frame + 延迟加载 |分页内容模态对话框 |涡轮框架|按需加载快讯 |涡轮流 |追加/更新 ## 参考文献 * 有关帧模式，请参阅 [turbo-frames.md]() * 有关流模式，请参阅 [turbo-streams.md]() * 请参阅 [stimulus.md]() 了解控制器模式 ## 测试热线 ### 系统规格 # 规范/系统/posts_spec.rb 需要“rails_helper” RSpec.describe“帖子”，输入：：system do 在 {driven_by(:selenium_chrome_headless) } 之前它“更新与 Turbo Frame 内联的帖子” post = create(:post, title: "原创") 访问 posts_path 在(“#post_#{post.id}”)内做 click_link“编辑” fill_in“标题”，其中：“已更新” 单击按钮“保存” 结束 Expect(page).to have_content("已更新") Expect(page).not_to have_content("原始") 结束它“用 Turbo Stream 添加评论” 帖子=创建（：帖子）访问 post_path(post) fill_in“评论”，其中：“很棒的帖子！” click_button“添加评论” 在（“#comments”）内做 Expect(page).to have_content(“很棒的帖子！”) 结束结束结束 ### 请求 Turbo Stream 的规格 # 规范/请求/posts_spec.rb RSpec.describe“帖子”，输入：:request do 描述“POST /posts”做什么 let(:valid_params) { { post: { title: "测试" } } } 它“返回涡轮流响应” 发布 posts_path，参数：valid_params，标题：{“接受”=>“text/vnd.turbo-stream.html”} 期望（response.media_type）.to eq（“text/vnd.turbo-stream.html”）期望（response.body）。包括（“turbo-stream”）结束结束结束 ## 常见模式 ### 使用 Frame 进行内联编辑 <%# _post.html.erb %> <%= Turbo_frame_tag dom_id(post) do %> <文章>

<%= post.title %>

<%= link_to "编辑", edit_post_path(post) %> <％结束％> <%# edit.html.erb %> <%= Turbo_frame_tag dom_id(@post) do %> <%= form_with 模型：@post do |f| %> <%= f.text_field :标题 %> <%= f.submit“保存”%> <%= link_to“取消”，@post %> <％结束％> <％结束％> ### 带流的 Flash 消息 # 应用程序/控制器/application_controller.rb 类 ApplicationController < ActionController::Base after_action :flash_to_turbo_stream, if: -> { request.format.turbo_stream? } 私人的 def flash_to_turbo_stream flash.each 执行|类型，消息| flash.now[类型] = 消息结束结束结束 ### 延迟加载框架 <%=turbo_frame_tag“评论”，src：post_comments_path（@post），加载：：lazy do %>

正在加载评论...

<％结束％> ## 调试技巧 1. **框架未更新？** 检查框架 ID 是否完全匹配 2. **流不工作？** 验证“Accept”标头包含涡轮流 3. **刺激未触发？** 检查控制器名称是否与文件名匹配 4. **事件不起作用？** 使用 `data-action="event->controller#method"`

热线模式

包含技能