Rails 5.1.4：创建Author时如何动态添加Book的fields_for字段

嘿，我来帮你搞定这个动态添加书籍字段的需求！在Rails里实现这个其实分后端配置和前端交互两部分，我一步步给你讲清楚，保证你能快速用上：

首先得让Author模型支持嵌套属性，这样才能通过作者表单直接创建关联的书籍。同时要在控制器里处理好强参数，确保嵌套字段能被正确接收。

模型代码 #

# app/models/author.rb
class Author < ApplicationRecord
  has_many :books, dependent: :destroy
  # 开启嵌套属性支持：allow_destroy用于删除书籍，reject_if跳过空字段的书籍
  accepts_nested_attributes_for :books, allow_destroy: true, reject_if: :all_blank
end

# app/models/book.rb
class Book < ApplicationRecord
  belongs_to :author
end

控制器代码 #

确保new动作初始化至少一个空书籍（也可以不初始化，让用户点击按钮再添加），并且create动作的强参数包含书籍的属性：

# app/controllers/authors_controller.rb
class AuthorsController < ApplicationController
  def new
    @author = Author.new
    # 默认生成一个空书籍输入框，用户也可以点击按钮添加更多
    @author.books.build
  end

  def create
    @author = Author.new(author_params)
    if @author.save
      redirect_to @author, notice: '作者和关联书籍创建成功！'
    else
      render :new
    end
  end

  private

  def author_params
    params.require(:author).permit(
      :name, # 替换成你的Author模型实际属性
      books_attributes: [:id, :title, :published_year, :_destroy] # 替换成你的Book模型实际属性
    )
  end
end

我们把书籍字段做成可复用的局部模板，再用JavaScript克隆模板并动态替换索引值（Rails需要正确的索引来识别多个嵌套字段）。

主视图（app/views/authors/new.html.erb） #

<%= form_with(model: @author, local: true) do |form| %>
  <% if @author.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@author.errors.count, "错误") %> 阻止了创建：</h2>
      <ul>
        <% @author.errors.full_messages.each do |msg| %>
          <li><%= msg %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <!-- 作者基本信息字段 -->
  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name %>
  </div>

  <!-- 书籍字段容器 -->
  <h3>关联书籍</h3>
  <div id="books-container">
    <%= form.fields_for :books do |book_form| %>
      <%= render 'book_fields', form: book_form %>
    <% end %>
  </div>

  <!-- 新增书籍按钮 -->
  <%= link_to '新增书籍', '#', class: 'add-book-btn' %>

  <div class="actions">
    <%= form.submit '创建作者' %>
  </div>

  <!-- 隐藏的书籍字段模板，用于克隆生成新字段 -->
  <%= content_tag :div, id: 'book-template', style: 'display: none;' do %>
    <%= form.fields_for :books, Book.new, child_index: 'NEW_BOOK' do |book_form| %>
      <%= render 'book_fields', form: book_form %>
    <% end %>
  <% end %>
<% end %>

书籍字段局部模板（app/views/authors/_book_fields.html.erb） #

<div class="book-fields">
  <div class="field">
    <%= form.label :title, '书名' %>
    <%= form.text_field :title %>
  </div>
  <div class="field">
    <%= form.label :published_year, '出版年份' %>
    <%= form.number_field :published_year %>
  </div>

  <!-- 仅对已存在的书籍显示删除复选框 -->
  <% if form.object.persisted? %>
    <div class="field">
      <%= form.check_box :_destroy %>
      <%= form.label :_destroy, '删除这本书' %>
    </div>
  <% end %>
</div>

动态添加的JavaScript #

在主视图底部或者单独的JS文件里添加这段代码，处理按钮点击事件：

document.addEventListener('DOMContentLoaded', function() {
  const addButton = document.querySelector('.add-book-btn');
  const booksContainer = document.getElementById('books-container');
  const template = document.getElementById('book-template').innerHTML;

  addButton.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止链接默认跳转行为
    // 用时间戳作为唯一索引，避免重复冲突
    const uniqueIndex = Date.now();
    // 替换模板里的占位符，生成新的书籍字段
    const newBookFields = template.replace(/NEW_BOOK/g, uniqueIndex);
    // 将新字段添加到容器末尾
    booksContainer.insertAdjacentHTML('beforeend', newBookFields);
  });
});

• reject_if: :all_blank会自动跳过所有字段为空的书籍，避免创建无意义的空Book记录
• 如果使用Turbo，把DOMContentLoaded换成turbo:load事件监听会更稳妥
• 记得根据你的实际模型属性，替换代码中对应的字段名（比如name、title等）

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