Rails7嵌套资源结合Stimulus勾选任务报错Batch id=undefined

问题场景 #

我的Rails 7应用模型关联如下：

• Batch 模型通过has_many关联多个Task
• Task 模型通过belongs_to归属一个Batch

路由采用嵌套资源配置：

resources :batches do
  resources :tasks
end

Task模型包含boolean类型的completed属性，需要实现Tasks索引页勾选复选框时标记任务完成、取消勾选标记未完成的功能。参考的非嵌套资源教程代码可正常运行，针对嵌套资源做了三处适配：

• 修改路由：将原非嵌套路由post "tasks/:id/toggle", to: "tasks#toggle"调整为post "batches/:batch_id/tasks/:id/toggle", to: "tasks#toggle"
• 在tasks_controller.js的toggle方法中新增batch_id获取逻辑：

toggle(e) {
        const id = e.target.dataset.id
        const batch_id = e.target.dataset.batch_id
        const csrfToken = document.querySelector("[name='csrf-token']").content

• 在_task.html.erb的复选框代码中新增batch_id传参：

<%= form.check_box :completed,
                       data: {
                         batch_id: @batch.id,
                         id: task.id,
                         action: "tasks#toggle"
                       },
                       class: "mr-2 align-middle bg-gray-50 border-gray-300 focus:ring-3 focus:ring-blue-300 h-5 w-5 rounded checked:bg-green-500" %>

报错表现 #

重启服务器后勾选复选框，终端抛出错误：

ActiveRecord::RecordNotFound (Couldn't find Batch with 'id'=undefined):

app/controllers/tasks_controller.rb:40:in `set_batch'

浏览器控制台同步报错，显示请求路径中batch_id为undefined：

POST http://localhost:3000/batches/undefined/tasks/34/toggle 404 (Not Found)

检查页面元素发现复选框的data-batch-id属性已经正确渲染，值正常：

<input data-batch-id="6" data-id="26" data-action="tasks#toggle" class="mr-2 align-middle bg-gray-50 border-gray-300 focus:ring-3 focus:ring-blue-300 h-5 w-5 rounded checked:bg-green-500" type="checkbox" value="1" name="task[completed]" id="task_completed">

问题根源 #

HTML DOM的dataset API会自动将data-*属性的短横线命名转换为驼峰命名映射到JS对象属性中。你在ERB中写的batch_id会被渲染为data-batch-id属性，在JS中访问这个属性对应的键名是batchId，而非batch_id，所以e.target.dataset.batch_id取值为undefined。

修复方法 #

将tasks_controller.js中获取batch_id的代码修改为驼峰写法即可：

const batch_id = e.target.dataset.batchId

如果不想调整JS代码，也可以直接将ERB中data配置的键名改为batchId，渲染后同样会生成data-batch-id属性，两种修改方式效果一致。

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