Rails 6中Cocoon多对多嵌套表单添加关联按钮异常问题

问题概述 #

在Rails 6中使用Cocoon构建嵌套表单，通过program_crops关联模型为spray_program添加多个crop。当前仅能添加一个关联项，点击link_to_add_association按钮后仅在URL后追加#，无法新增关联字段；控制台无JavaScript报错，单个多对多关联可正常创建。

排查与修复步骤 #

1. 修正模型关联的语法错误 #

ProgramCrop模型中belongs_to关联的inverse_of参数缺少逗号，会导致关联映射异常：

# 错误写法
class ProgramCrop < ApplicationRecord
  belongs_to :crop
  belongs_to :spray_program inverse_of: :program_crops # 缺少逗号
end

# 修正后
class ProgramCrop < ApplicationRecord
  belongs_to :crop
  belongs_to :spray_program, inverse_of: :program_crops
end

2. 确保Cocoon JavaScript正确引入 #

Rails 6使用Webpacker管理前端资源，需确认Cocoon的JS已正确导入：

• 在app/javascript/packs/application.js中添加：

  import 'cocoon'
  

• 确保布局文件（如app/views/layouts/application.html.erb）加载Webpacker打包的JS：

  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  

3. 指定关联字段插入容器 #

Cocoon默认将新字段插入到触发按钮相邻位置，可通过data-association-insertion-node明确指定插入容器，避免位置错误：

<div id="programCrops">
  <%= form.fields_for :program_crops do |program_crop_form| %>
    <%= render 'program_crop_fields', f: program_crop_form %>
  <% end %>
</div>
<div class="links">
  <%= link_to_add_association "Add crop", form, :program_crops, 
      data: { association_insertion_node: "#programCrops" } %>
</div>

4. 验证嵌套字段模板结构 #

确保_program_crop_fields.html.erb中的字段被div.nested-fields正确包裹，Cocoon依赖此类识别嵌套字段模板：

<div class="nested-fields">
  <div class="field">
    <%= f.label :crop_id, "Crop" %> <!-- 修正label与字段匹配，原代码用:name对应crop_id易混淆 -->
    <%= f.collection_select :crop_id, Crop.all, :id, :name %>
  </div>
  <%= link_to_remove_association "Remove crop", f %>
</div>

5. 确认控制器参数允许嵌套属性 #

在SprayProgramsController的spray_program_params方法中，需确保允许program_crops_attributes参数（包含:crop_id和:_destroy）：

def spray_program_params
  params.require(:spray_program).permit(
    :date, :farm_id,
    program_sprayer_attributes: [:sprayer_id, :litres_per_min, :speed],
    program_crops_attributes: [:id, :crop_id, :_destroy] # 包含:id以便后续更新/删除操作
  )
end

验证 #

完成上述修正后，刷新页面再次点击"Add crop"按钮，应能正常新增嵌套字段；提交表单时，请求参数中会包含多个program_crops_attributes条目，示例：

{
  "spray_program" => {
    # ... 其他参数 ...
    "program_crops_attributes" => {
      "0" => {"crop_id" => "8", "_destroy" => "false"},
      "1" => {"crop_id" => "9", "_destroy" => "false"}
    }
  }
}

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