Rails 7中如何将.js.erb代码迁移至Stimulus控制器？

方案1：用Turbo Stream直接更新DOM（最简便） #

Rails 7推荐用Turbo Stream替代传统的js.erb处理AJAX后的DOM更新，这是最直接的替代方案：

1. 修改links_controller.rb的create动作，添加Turbo Stream响应：

def create
  @link = Link.new(link_params)

  if @link.save
    respond_to do |format|
      format.turbo_stream # 自动渲染create.turbo_stream.erb
      format.html { redirect_to links_path }
    end
  else
    format.html { render :new }
  end
end

2. 创建app/views/links/create.turbo_stream.erb文件，写入DOM更新逻辑：

<%= turbo_stream.update 'short-link', @link.lookup_code %>

该文件会直接定位页面上id为short-link的元素，将其内容替换为@link.lookup_code，完全替代原js.erb的功能。

方案2：结合Stimulus控制器实现（满足迁移到Stimulus的需求） #

如果需要用Stimulus控制器处理逻辑，可以通过自定义事件传递后端生成的lookup_code：

1. 修改Stimulus控制器links_controller.js：

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
  static targets = ['shortLink'] // 声明目标元素，对应视图中的data属性

  // 定义接收lookup_code并更新DOM的方法
  updateLookupCode({ detail: { code } }) {
    this.shortLinkTarget.textContent = code;
  }

  connect() {
    // 监听自定义事件
    document.addEventListener('update:lookup-code', this.updateLookupCode.bind(this));
  }

  disconnect() {
    // 销毁事件监听，避免内存泄漏
    document.removeEventListener('update:lookup-code', this.updateLookupCode.bind(this));
  }
}

2. 在视图中（比如new.html.erb），给目标元素绑定Stimulus控制器和target：

<div data-controller="links">
  <span id="short-link" data-links-target="shortLink"></span>
</div>

3. 创建app/views/links/create.turbo_stream.erb，触发自定义事件传递lookup_code：

<%= turbo_stream.append 'short-link' do %>
  <script>
    document.dispatchEvent(new CustomEvent('update:lookup-code', {
      detail: { code: "<%= j @link.lookup_code %>" }
    }));
  </script>
<% end %>

这里用turbo_stream.append仅用于让Turbo执行这段JS，不会添加多余内容，事件触发后Stimulus控制器会自动更新目标元素的内容。

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