DEV Community
·
刺激
💡
原文英文，约200词，阅读约需1分钟。
📝
内容提要
用户提交评论后，Rails 控制器保存评论并设置 flash[:notice]，然后渲染 create.turbo_stream.erb，Turbo Stream 响应中包含新的 toast HTML。Stimulus 初始化 ToastController，使用 Bootstrap 显示 toast，并在 3 秒后自动隐藏。
🎯
关键要点
-
用户提交评论表单（通过 Turbo）。
-
Rails 控制器保存评论并设置 flash[:notice]。
-
Rails 渲染 create.turbo_stream.erb。
-
turbo_stream.append 渲染 _toast.html.erb 部件并包含 flash 消息。
-
浏览器接收 Turbo Stream 响应。
-
Turbo 将新的 toast HTML（包含 data-controller="toast"）添加到 <div id="toasts"> 中。
-
Stimulus 识别新的 data-controller="toast" 元素。
-
Stimulus 为该元素初始化新的 ToastController 实例。
-
控制器的 connect() 方法运行。
-
connect() 使用 Bootstrap 显示 toast。
-
Bootstrap 在 3 秒后自动隐藏 toast。
➡️
