在Rails的Stimulus控制器中访问实例变量/Active Record实现Todo删除

核心问题说明 #

Stimulus是前端控制器，运行在浏览器环境中，无法直接访问后端Rails的@todos实例变量，也不能调用ActiveRecord的Todo.destroy()方法——这些都是后端服务器内存中的资源和逻辑，前端无权直接操作，必须通过后端接口完成数据修改，再更新前端DOM。

解决方案步骤 #

1. 配置后端删除路由 #

确保Rails路由中包含Todo的删除动作：

# config/routes.rb
Rails.application.routes.draw do
  resources :todos, only: [:index, :destroy] # 根据现有路由调整，保留必要动作
end

2. 更新HTML.ERB模板 #

给删除链接添加后端删除接口的URL，同时给每个Todo项添加唯一标识，方便后续删除DOM元素：

<div data-controller="complete">
  <% @todos.each do |todo| %>
    <div id="todo-<%= todo.id %>" data-todo-id="<%= todo.id %>">
      <div>
        <label><%= todo.name %></label>
      </div>
      <a href="#" data-action="click->complete#delete" data-url="<%= todo_path(todo, format: :json) %>">Delete</a>
    </div>
  <% end %>
</div>

3. 修改Stimulus控制器 #

通过fetch发送DELETE请求到后端接口，请求成功后移除对应DOM元素：

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

export default class extends Controller {
  delete(event) {
    event.preventDefault(); // 阻止默认跳转行为
    const deleteUrl = event.currentTarget.dataset.url;
    const todoElement = event.currentTarget.closest('[data-todo-id]');

    fetch(deleteUrl, {
      method: 'DELETE',
      headers: {
        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
        'Accept': 'application/json'
      }
    })
    .then(response => {
      if (response.ok) {
        todoElement.remove(); // 从DOM中删除该项
      } else {
        console.error('删除操作失败');
      }
    })
    .catch(err => console.error('请求出错:', err));
  }
}

4. 完善后端控制器的destroy方法 #

确保TodosController的destroy动作支持JSON响应：

# app/controllers/todos_controller.rb
def destroy
  @todo = Todo.find(params[:id])
  @todo.destroy

  respond_to do |format|
    format.html { redirect_to todos_path, notice: 'Todo已删除' }
    format.json { head :no_content } # 返回204状态码，告知前端操作成功
  end
end

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