Rails 7中如何结合button_to、参数与Stimulus实现视图更新

针对你要实现的「点击按钮→传参到后端→改库→JS更新视图」需求，用Stimulus结合Fetch就能替代传统的remote: true+js.erb方案，下面是具体实现步骤：

核心思路 #

用Stimulus监听按钮点击事件，通过Fetch API把参数传给后端自定义动作；后端处理数据库修改后，返回JSON数据（或Turbo Stream响应）；前端拿到响应后直接操作DOM更新视图，或者让Turbo自动处理DOM替换。

方案一：纯Stimulus + Fetch + JSON响应 #

1. 生成Stimulus控制器 #

执行命令创建控制器：

rails generate stimulus UpdateRecord

编写控制器逻辑，处理点击、发起请求、更新视图：

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

export default class extends Controller {
  // 定义需要接收的参数（从视图传入）
  static values = {
    actionUrl: String,
    recordId: Number
  }

  // 按钮点击触发的方法
  triggerUpdate() {
    // 构造请求参数
    const formData = new FormData()
    formData.append("record_id", this.recordIdValue)
    // 可添加其他自定义参数，比如：formData.append("new_status", "completed")

    // 发起POST请求
    fetch(this.actionUrlValue, {
      method: "POST",
      headers: {
        // 带上CSRF Token，避免跨站请求伪造
        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
      },
      body: formData
    })
    .then(res => res.json())
    .then(data => {
      // 拿到后端返回的数据，更新视图
      // 示例：修改按钮文本和状态显示
      this.element.textContent = data.button_text
      const statusElement = this.element.closest(".record-card").querySelector(".record-status")
      statusElement.textContent = data.updated_status
    })
    .catch(err => console.error("更新失败：", err))
  }
}

2. 视图层绑定Stimulus #

在视图里添加按钮，绑定Stimulus控制器、参数和动作：

<!-- 示例：记录卡片中的更新按钮 -->
<div class="record-card">
  <span class="record-status"><%= @record.status %></span>
  <button 
    data-controller="update-record"
    data-update-record-action-url-value="<%= custom_action_record_path(@record) %>"
    data-update-record-record-id-value="<%= @record.id %>"
    data-action="update-record#triggerUpdate"
    class="btn"
  >
    更新状态
  </button>
</div>

3. 后端控制器定义自定义动作 #

在对应控制器里实现数据库修改逻辑，并返回JSON响应：

# app/controllers/records_controller.rb
def custom_action
  @record = Record.find(params[:record_id])
  # 这里写你的数据库修改逻辑，比如更新状态
  @record.update!(status: :completed)

  # 返回前端需要的更新数据
  render json: {
    updated_status: @record.status.humanize,
    button_text: "已完成"
  }
end

4. 配置路由 #

在routes.rb中添加自定义动作的路由：

# config/routes.rb
resources :records do
  post :custom_action, on: :member # 生成 /records/:id/custom_action 路由
end

方案二：结合Turbo Stream（更Hotwire风格） #

如果想更贴合Hotwire的生态，可以用Turbo Stream让后端直接返回DOM更新指令，前端无需手动操作DOM：

1. 修改后端控制器动作 #

返回Turbo Stream响应，指定要替换的DOM元素和内容：

# app/controllers/records_controller.rb
def custom_action
  @record = Record.find(params[:record_id])
  @record.update!(status: :completed)

  # 用Turbo Stream替换指定ID的DOM元素
  render turbo_stream: turbo_stream.replace(
    "record-status-#{@record.id}",
    partial: "records/status",
    locals: { record: @record }
  )
end

2. 调整视图元素 #

给需要更新的状态元素添加唯一ID：

<!-- app/views/records/_status.html.erb -->
<span id="record-status-<%= record.id %>" class="record-status">
  <%= record.status.humanize %>
</span>

<!-- 主视图中引用局部模板 -->
<div class="record-card">
  <%= render "status", record: @record %>
  <button 
    data-controller="update-record"
    data-update-record-action-url-value="<%= custom_action_record_path(@record) %>"
    data-update-record-record-id-value="<%= @record.id %>"
    data-action="update-record#triggerUpdate"
    class="btn"
  >
    更新状态
  </button>
</div>

3. 简化Stimulus控制器 #

因为Turbo会自动处理响应，所以Stimulus只需要发起请求即可：

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

export default class extends Controller {
  static values = {
    actionUrl: String,
    recordId: Number
  }

  triggerUpdate() {
    const formData = new FormData()
    formData.append("record_id", this.recordIdValue)

    fetch(this.actionUrlValue, {
      method: "POST",
      headers: {
        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content,
        // 指定接受Turbo Stream格式的响应
        "Accept": "text/vnd.turbo-stream.html"
      },
      body: formData
    })
    .catch(err => console.error("更新失败：", err))
  }
}

两种方案对比 #

• 纯Stimulus方案：更灵活，适合需要复杂前端逻辑的场景，完全手动控制DOM更新
• Turbo Stream方案：更简洁，符合Hotwire「后端驱动前端」的理念，减少前端代码量

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