Rails中创建父对象Order后，如何批量创建多个子对象Item？

看起来你遇到的问题是用nested_attributes时，编辑Order的表单会自动带出已创建的Item，而你希望每次只添加新的Item，还支持一次性创建多个。我给你几个实用的方案，按需选择：

方案一：独立的Item创建表单（推荐，逻辑清晰） #

这种方式完全避开nested_attributes的困扰，给已存在的Order单独做一个添加Item的页面，支持批量新增：

1. 配置路由 #

在config/routes.rb里添加嵌套路由：

resources :orders do
  resources :items, only: [:new, :create]
end

2. 编写Items控制器 #

class ItemsController < ApplicationController
  def new
    @order = Order.find(params[:order_id])
    # 默认初始化3个空Item，方便批量添加，数量可以调整
    3.times { @order.items.build }
  end

  def create
    @order = Order.find(params[:order_id])
    # 批量创建Item，只保留有内容的（避免空Item被创建）
    items_params.each do |item_attrs|
      next if item_attrs.values.all?(&:blank?)
      @order.items.create(item_attrs)
    end
    redirect_to @order, notice: "Items added successfully!"
  end

  private
  def items_params
    params.require(:order).permit(items: [:name, :quantity, :price])[:items] || []
  end
end

3. 编写Item新增视图（app/views/items/new.html.erb） #

<h1>Add Items to Order #<%= @order.id %></h1>
<%= form_with(model: @order, url: order_items_path(@order), method: :post) do |form| %>
  <%= form.fields_for :items do |item_form| %>
    <div class="item-fields">
      <%= item_form.label :name %>
      <%= item_form.text_field :name %>
      
      <%= item_form.label :quantity %>
      <%= item_form.number_field :quantity %>
      
      <%= item_form.label :price %>
      <%= item_form.number_field :price %>
    </div>
  <% end %>

  <!-- 加个按钮用JS动态添加更多Item字段 -->
  <button type="button" id="add-item">Add More Item</button>
  <%= form.submit "Save Items" %>
<% end %>

<script>
document.getElementById('add-item').addEventListener('click', function() {
  const itemFields = document.querySelector('.item-fields');
  const newFields = itemFields.cloneNode(true);
  // 清空克隆的字段值
  newFields.querySelectorAll('input').forEach(input => input.value = '');
  // 修改字段的name属性，确保参数能正确传递（比如从items[0]变成items[3]）
  const index = document.querySelectorAll('.item-fields').length;
  newFields.querySelectorAll('input').forEach(input => {
    input.name = input.name.replace(/items\[\d+\]/, `items[${index}]`);
  });
  itemFields.parentNode.appendChild(newFields);
});
</script>

这个方案的好处是逻辑简单，用户每次进入这个页面都只会看到空的Item输入框（或者你预设的数量），不会显示已有的Item，完美符合你的需求。

方案二：改进Nested Attributes，只处理新Item #

如果不想单独做页面，也可以在Order的编辑页面里只渲染新增Item的字段，忽略已有的：

1. 修改Order模型 #

添加一个虚拟属性来接收新Item的参数：

class Order < ApplicationRecord
  has_many :items
  attr_accessor :new_items_attributes
  # 处理虚拟属性，创建新Item
  after_save :create_new_items

  private
  def create_new_items
    return unless new_items_attributes.present?
    new_items_attributes.each do |attrs|
      next if attrs.values.all?(&:blank?)
      items.create(attrs)
    end
  end
end

2. 修改Orders控制器的update方法 #

def update
  @order = Order.find(params[:id])
  if @order.update(order_params)
    redirect_to @order, notice: "Order updated and items added!"
  else
    render :edit
  end
end

private
def order_params
  params.require(:order).permit(:status, new_items_attributes: [:name, :quantity, :price])
end

3. 修改Order编辑视图 #

只渲染new_items的字段，不要渲染已有的items：

<h1>Edit Order #<%= @order.id %></h1>
<%= form_with(model: @order) do |form| %>
  <!-- 这里放Order本身的字段，比如状态等 -->
  <%= form.label :status %>
  <%= form.text_field :status %>

  <!-- 新增Item的字段，默认初始化2个空的 -->
  <h3>Add New Items</h3>
  <% 2.times do %>
    <%= form.fields_for :new_items_attributes, OpenStruct.new do |item_form| %>
      <div class="new-item-fields">
        <%= item_form.label :name %>
        <%= item_form.text_field :name %>
        
        <%= item_form.label :quantity %>
        <%= item_form.number_field :quantity %>
        
        <%= item_form.label :price %>
        <%= item_form.number_field :price %>
      </div>
    <% end %>
  <% end %>

  <button type="button" id="add-new-item">Add More Item</button>
  <%= form.submit "Update Order" %>
<% end %>

<!-- 同样加JS动态添加字段的逻辑，和方案一类似，调整name属性即可 -->
<script>
document.getElementById('add-new-item').addEventListener('click', function() {
  const itemFields = document.querySelector('.new-item-fields');
  const newFields = itemFields.cloneNode(true);
  newFields.querySelectorAll('input').forEach(input => input.value = '');
  const index = document.querySelectorAll('.new-item-fields').length;
  newFields.querySelectorAll('input').forEach(input => {
    input.name = input.name.replace(/new_items_attributes\[\d+\]/, `new_items_attributes[${index}]`);
  });
  itemFields.parentNode.appendChild(newFields);
});
</script>

这个方案的好处是不用单独建页面，但需要处理虚拟属性，逻辑稍复杂一点。

总结 #

如果你的场景是经常需要给已有的Order添加Item，方案一会更直观，用户体验更好；如果只是偶尔在编辑Order的时候顺便加Item，方案二也能满足需求。两种方案都支持一次性创建多个Item，而且不会显示已有的Item。

内容的提问来源于stack exchange，提问作者André Luiz