jquery - Rails 5 - 如何在编辑表单中动态添加嵌套字段？

Question

已经尝试解决这个问题一个月了，乍一看并不是很复杂:有 3 个模型 - team、user 和 team_user(has_namy:通过)以编辑和新建团队的形式做到动态添加这个团队成员的能力。

场景:

• 用户进入团队新表单
• 表示团队名称
• 在名称字段后选择用户(团队成员)
• 点击“添加成员”按钮
• 验证成员后，将在文本字段中的团队名称字段后添加 + 对面的删除按钮
• 从选择器中删除他的(成员)姓名(因为它已经是团队成员)
• 在 selite 中选择下一个用户，然后单击“添加成员”按钮
• 按“提交”按钮保存新团队和团队成员

困难:

• 我尝试通过 gem Cocoon 来完成，但无法制作不同的 parshaly 来选择要添加到其中的用户 (SELECT) 并已添加成员(全名 - 文本)
• 如果通过 <% = from_for ... remote: true%> 和 Controller groups_controller 中的单独 Controller 或新操作完成，则它将是两种嵌套形式(形状和形式团队 team_user)及其第二个提交按钮。据我了解，附件表格并不是 gud。
• 表单中的更改(更改团队名称以及添加/删除团队成员只有在单击“保存”基本上提交表单团队后才会有计数)

应用程序/模型/user.rb

class User < ApplicationRecord
  has_many :team_users
  has_many :teams, through: :team_users
  accepts_nested_attributes_for :team_users, :teams, allow_destroy: true
end

app/models/team.rb

class Team < ApplicationRecord
  has_many :team_users
  has_many :users, through: :team_users
  accepts_nested_attributes_for :team_users, allow_destroy: true, reject_if: proc { |a| a['user_id'].blank? }
end

应用程序/模型/team_user.rb

class TeamUser < ApplicationRecord
  belongs_to :team
  belongs_to :user
  accepts_nested_attributes_for :team, :user, allow_destroy: true
end

应用程序/ Controller /teams_controller.rb

class TeamsController < ApplicationController
  before_action :set_team, :set_team_users, only: [:show, :edit, :update, :destroy]
  before_action :set_team_ancestry, only: [:new, :edit, :create, :update, :destroy]
  before_action :set_new_team_user, only: [:new, :edit]
  before_action :logged_in_user

  layout 'sidebar'

  # GET /teams
  def index
    @teams = Team.search(params[:search], :name).sorting(params[:sort], params[:direction]).paginate(page: params[:page])
  end

  # GET /teams/1
  def show
  end

  # GET /teams/new
  def new
    @team = Team.new(parent_id: params[:parent_id])
  end

  # GET /teams/1/edit
  def edit
    @team_users = @team.team_users
  end

  # POST /teams
  def create
    @team = Team.new(team_params)

    respond_to do |format|
      if @team.save
        format.html { redirect_to @team, success: t('.flash.success.message') }
      else
        format.html { render :new, danger: t('.flash.danger.message') }
      end
    end
  end

  # PATCH/PUT /teams/1
  def update
    respond_to do |format|
      if @team.update(team_params)
        format.html { redirect_to @team, success: t('.flash.success.message') }
      else
        format.html { render :edit, danger: t('.flash.danger.message') }
      end
    end
  end

  # DELETE /teams/1
  def destroy
    @team.destroy
    respond_to do |format|
      format.html { redirect_to teams_url, success: t('.flash.success.message') }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_team
      @team = Team.find(params[:id])
    end

    def set_team_ancestry
      @team_collection = Team.where.not(id: params[:id]).all.each { |c| c.ancestry = c.ancestry.to_s + (c.ancestry != nil ? "/" : '') + c.id.to_s 
      }.sort{ |x,y| x.ancestry <=> y.ancestry }.map{ |c| ["-" * (c.depth - 1) + c.name,c.id] }
    end

    def set_team_users
      @team_users_collection = User.all.collect { |p| [ p.name, p.id ] }
    end

    def set_new_team_user
      @team_users_new = @team.team_users.build
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def team_params
      params.require(:team).permit(
        :name,
        :parent_id,
        team_users_attributes: [:_destroy, :id, :user_id]
      )
    end
end

Answer 1

我按照 DriftingRuby episode 中的解决方案进行操作。我能够在我的应用程序中实现它并自定义一些功能。注意:这适用于 new 和 edit 表单，但您可以轻松地将其仅用于 edit 表单。