Rails如何在控制器与Stimulus控制器间传值实现无刷新动态更新视图

首先先澄清几个认知误区：

• 直接修改ERB遍历范围触发自动更新完全不可行：ERB是服务端渲染语言，页面加载到用户浏览器时，所有Ruby代码已经执行完毕转成静态HTML了，浏览器端无法直接运行或修改Ruby代码逻辑。
• 预渲染数万条结果靠CSS控制显隐的方案不要用：几万条DOM节点会占用极高内存，直接导致页面卡顿甚至浏览器崩溃，性价比极低。
• 卡片强烈建议封装为partial（局部模板）：首次加载、后续异步加载新批次都可以复用同一份渲染逻辑，避免重复写代码、改样式要同步改多处的问题。

核心实现逻辑 #

你现在已经有Stimulus基础，按下面步骤做就可以实现无刷新换一批的效果：

1. 先解决随机顺序一致性问题 #

你现在控制器里对结果做了shuffle!，如果每次异步请求都重新查库+打乱顺序，会出现不同批次结果重复、顺序错乱的问题。第一次执行搜索时，需要把打乱顺序后的电影ID列表暂存起来：

def search_results
  # 原有查询逻辑拿到匹配的电影集合
  @movies = @movies.shuffle
  # 生成唯一标识，把打乱后的ID列表存缓存，设置15分钟过期
  @result_set_id = SecureRandom.uuid
  Rails.cache.write("search_result:#{@result_set_id}", @movies.pluck(:id), expires_in: 15.minutes)
  # 首次只传前3条给视图渲染
  @movies = @movies.first(3)
end

把单张电影卡片抽成partial，路径为app/views/movies/_movie_card.html.erb，把你原来的卡片DOM放进去，接收movie局部变量即可。

2. 新增获取下一批结果的接口 #

加个路由和对应的控制器方法，专门返回下一批3条电影渲染后的HTML片段：

# config/routes.rb
get "search/next_batch", to: "searches#next_batch"

def next_batch
  # 从缓存取对应搜索的排序后ID列表
  movie_ids = Rails.cache.read("search_result:#{params[:result_set_id]}")
  offset = params[:offset].to_i
  # 取当前偏移量后的3条ID，查询对应电影记录，保持原有打乱后的顺序
  batch_ids = movie_ids[offset, 3]
  @movies = Movie.where(id: batch_ids).index_by(&:id).values_at(*batch_ids).compact
  # 直接渲染partial集合，不加载布局
  render partial: "movies/movie_card", collection: @movies, layout: false
end

3. 调整视图结构 #

给卡片容器和刷新按钮加上Stimulus需要的data属性，记录当前偏移量和结果集ID：

<!-- 卡片容器，加refresh控制器的target -->
<div class="movie-list" data-refresh-target="cards" data-current-offset="3" data-result-set-id="<%= @result_set_id %>">
  <% @movies.each do |movie| %>
    <%= render "movies/movie_card", movie: movie %>
  <% end %>
</div>

<!-- 原有刷新按钮，补个target方便控制状态 -->
<div class="refresh-button" data-controller="refresh">
  <button data-refresh-target="btn" data-action="click->refresh#next">Refresh</button>
</div>

4. 编写Stimulus控制器逻辑 #

在对应的refresh控制器里写next方法，点击按钮时发异步请求拿新内容，替换原有卡片即可：

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

export default class extends Controller {
  static targets = ["cards", "btn"]

  async next() {
    const cardsContainer = this.cardsTarget
    const currentOffset = parseInt(cardsContainer.dataset.currentOffset)
    const resultSetId = cardsContainer.dataset.resultSetId

    // 加loading状态避免重复点击
    this.btnTarget.disabled = true
    this.btnTarget.innerText = "加载中..."

    try {
      const res = await fetch(`/search/next_batch?offset=${currentOffset}&result_set_id=${resultSetId}`)
      if (!res.ok) throw new Error("请求失败")
      const html = await res.text()
      // 替换原有卡片内容
      cardsContainer.innerHTML = html
      // 更新偏移量供下次点击使用
      cardsContainer.dataset.currentOffset = currentOffset + 3
    } catch (err) {
      alert("加载失败，请重试")
    } finally {
      this.btnTarget.disabled = false
      this.btnTarget.innerText = "Refresh"
    }
  }
}

更简便的Turbo方案（Rails 7默认支持） #

如果你项目已经用了Turbo，连Stimulus里的fetch逻辑都不用手写，直接用Turbo Frame即可：

1. 把卡片区域用turbo_frame_tag包裹，指定id为search_cards
2. 刷新按钮直接指向next_batch路径，加上data-turbo-frame="search_cards"属性，点击时Turbo会自动发异步请求，把返回的内容替换到对应帧里，偏移量可以通过按钮的query参数动态更新，代码量更少。

补充说明 #

如果结果集已经翻到末尾（偏移量超过总结果数），可以在next_batch接口里返回空内容或者提示文字，前端拿到后直接隐藏刷新按钮即可，不需要额外处理。

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