Rails中父模型保存时才提交分页嵌套子属性修改的最优方案

方案1：前端分页（最优，无服务端改造） #

如果单员工关联的技能条目数在1000条以内，直接放弃服务端分页逻辑，改为前端分页：

• 首次加载编辑页时一次性查询出员工的全量技能关联数据
• 所有技能的表单输入字段都渲染在同一个父模型表单内，用JS控制每次仅展示单页的字段，其余页字段隐藏
• 提交时全量字段自动跟随父模型表单一起发送，直接复用原有accepts_nested_attributes_for的处理逻辑即可，完全不需要额外开发暂存、合并逻辑

示例Stimulus分页控制器代码：

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

export default class extends Controller {
  static values = { perPage: Number, currentPage: Number }
  static targets = ["pageSection"]

  connect() {
    this.showPage(this.currentPageValue)
  }

  nextPage() {
    this.saveCurrentPageValues()
    this.showPage(this.currentPageValue + 1)
  }

  prevPage() {
    this.saveCurrentPageValues()
    this.showPage(this.currentPageValue - 1)
  }

  showPage(pageNum) {
    this.currentPageValue = pageNum
    this.pageSectionTargets.forEach((section, index) => {
      section.hidden = index !== (pageNum - 1)
    })
  }

  // 可选：如果动态渲染字段，可在此处暂存当前页输入值
  saveCurrentPageValues() {}
}

方案2：多步表单Gem自动处理暂存 #

如果技能条目数过多不适合全量加载到前端，直接使用Rails生态成熟的多步表单Gem wicked 实现暂存逻辑，不需要自行开发Redis存储、参数合并、校验逻辑：

• 将每一页技能定义为多步表单的一个步骤
• wicked 会自动将每一页的输入参数暂存在用户Session中，支持单步输入校验
• 全部页面编辑完成后，直接读取所有步骤的暂存参数合并，通过嵌套属性一次性写入数据库即可

示例控制器代码：

# app/controllers/employee_steps_controller.rb
class EmployeeStepsController < ApplicationController
  include Wicked::Wizard
  steps :basic_info, :skills_page_1, :skills_page_2, :skills_page_3

  def show
    @employee = current_company.employees.find(params[:employee_id])
    # 自动加载之前步骤暂存的参数填充表单
    @employee.attributes = session[:employee_params] || {}
    render_wizard
  end

  def update
    @employee = current_company.employees.find(params[:employee_id])
    # 合并当前步骤参数到暂存的Session中
    session[:employee_params] ||= {}
    session[:employee_params].deep_merge!(employee_params)
    @employee.attributes = session[:employee_params]

    if step == steps.last
      # 最后一步直接保存所有参数
      @employee.save
      session.delete(:employee_params)
    end
    render_wizard @employee
  end
end

方案3：浏览器侧暂存表单数据 #

如果不想引入额外Gem，可通过JS在浏览器端暂存所有分页的输入数据：

• 切换分页时，将当前页所有输入字段的值存入localStorage或全局FormData对象
• 渲染新分页的表单时，从暂存对象中读取已填写的值自动回填
• 最终点击保存按钮时，将所有暂存的字段和父模型参数一起提交到后端，服务端直接沿用原有嵌套属性处理逻辑即可

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