Rails Turbo/Stimulus重构：如何替代UJS的JS响应弹窗逻辑？

针对你提到的「获取历史版本并展示弹窗」场景，下面是几种符合 Turbo/Stimulus 设计范式的实现方式，按场景优先级排序：

1. 场景：仅需弹窗展示纯数据（轻量交互）—— Stimulus 直接发起 Fetch 请求 #

当不需要更新页面 DOM，只是获取数据做简单交互时，直接用 Stimulus 处理请求是最简洁的方案，完全不需要 Turbo 介入，这也是官方认可的 Stimulus 使用方式。

实现步骤： #

页面按钮（绑定 Stimulus 控制器）

<!-- things/show.html.erb -->
<button data-controller="version-fetcher" 
        data-version-fetcher-thing-id-value="<%= @thing.id %>"
        onclick="this.dispatch('fetch')">查看历史版本</button>

Stimulus 控制器（处理请求和弹窗）

// app/javascript/controllers/version_fetcher_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    thingId: Number
  }

  async fetch() {
    // 发起请求并指定接收 JSON
    const response = await fetch(`/things/${this.thingIdValue}/versions`, {
      headers: { 'Accept': 'application/json' }
    })
    const versions = await response.json()
    
    // 展示弹窗（这里用 alert，实际可替换为模态框）
    alert(versions.join('\n'))
  }
}

Rails 控制器（返回 JSON 数据）

# app/controllers/things/versions_controller.rb
def show
  @versions = ThingVersion.where(thing_id: params[:thing_id]).pluck(:text)
  respond_to do |format|
    format.json { render json: @versions }
  end
end

2. 场景：需结合 DOM 更新（比如后续要插入版本列表）—— Turbo Stream + Stimulus #

如果未来需要把版本数据同步到页面 DOM 中，用 Turbo Stream 处理响应，再通过 Stimulus 触发弹窗，完美契合 Turbo 负责 DOM 操作、Stimulus 负责行为的分工。

实现步骤： #

页面新增隐藏容器（用于接收 Turbo Stream 内容）

<!-- things/show.html.erb -->
<div id="version-alert-container" style="display: none;"></div>

<%= link_to "查看历史版本", thing_versions_path(@thing), 
            data: { turbo_stream: true } %>

Rails 控制器（返回 Turbo Stream）

# app/controllers/things/versions_controller.rb
def show
  @versions = ThingVersion.where(thing_id: params[:thing_id]).pluck(:text)
  respond_to do |format|
    format.turbo_stream
  end
end

Turbo Stream 模板（渲染临时元素并传递数据）

<!-- app/views/things/versions/show.turbo_stream.erb -->
<%= turbo_stream.append "version-alert-container" do %>
  <div data-controller="version-alert" 
       data-version-alert-versions-value="<%= @versions.to_json %>"></div>
<% end %>

Stimulus 控制器（触发弹窗并清理 DOM）

// app/javascript/controllers/version_alert_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    versions: Array
  }

  connect() {
    // 展示弹窗
    alert(this.versionsValue.join('\n'))
    // 用完立即移除临时元素，避免 DOM 冗余
    this.element.remove()
  }
}

3. 场景：复杂 UI 展示（比如带样式的模态框）—— Turbo Frame + Stimulus #

如果需要展示的不是简单弹窗，而是带排版/交互的复杂模态框，用 Turbo Frame 加载内容，再通过 Stimulus 触发展示，扩展性更强。

实现步骤： #

页面按钮和 Turbo Frame 占位

<!-- things/show.html.erb -->
<%= turbo_frame_tag "version-modal-frame", src: "", style: "display: none" %>

<button onclick="document.getElementById('version-modal-frame').src = '<%= thing_versions_path(@thing) %>'">查看历史版本</button>

Rails 控制器（返回 HTML 内容）

# app/controllers/things/versions_controller.rb
def show
  @versions = ThingVersion.where(thing_id: params[:thing_id]).pluck(:text)
end

版本页面模板（绑定 Stimulus 控制器）

<!-- app/views/things/versions/show.html.erb -->
<%= turbo_frame_tag "version-modal-frame" do %>
  <div data-controller="version-modal" 
       data-version-modal-versions-value="<%= @versions.to_json %>"></div>
<% end %>

Stimulus 控制器（渲染并展示模态框）

// app/javascript/controllers/version_modal_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    versions: Array
  }

  connect() {
    // 动态创建模态框（以 Bootstrap 为例）
    const modalEl = document.createElement('div')
    modalEl.innerHTML = `
      <div class="modal fade" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">历史版本</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              <ul>${this.versionsValue.map(v => `<li>${v}</li>`).join('')}</ul>
            </div>
          </div>
        </div>
      </div>
    `
    document.body.appendChild(modalEl)
    
    // 展示模态框
    const modal = new bootstrap.Modal(modalEl.querySelector('.modal'))
    modal.show()
    
    // 关闭后清理 DOM
    modalEl.querySelector('.modal').addEventListener('hidden.bs.modal', () => {
      modalEl.remove()
      this.element.remove()
    })
  }
}

总结 #

• 纯数据交互：优先用 Stimulus + Fetch，轻量直接；
• 需同步 DOM 更新：用 Turbo Stream + Stimulus，遵循框架分工；
• 复杂 UI 展示：用 Turbo Frame + Stimulus，便于后续扩展。

内容的提问来源于stack exchange，提问作者nimmolo