Rails 5 - 如何在編輯表單中動態添加嵌套字段？

Question

已經一個月試圖解決問題的一見鍾情並不是很複雜： 有3個模型 - 團隊，用戶和team_user（has_namy：through） 以編輯和新團隊的形式做動態添加這個團隊的成員。

場景：

• 用戶談到球隊新形式
• 表示球隊的名稱
• 名稱字段中選擇用戶（團隊成員）後
• 單擊添加成員按鈕
• 確認某個成員後，在文本字段中的團隊名稱字段後面添加+刪除按鈕
• 從選擇器刪除他（會員）的名字（因爲它已經是一個團隊成員）
• 在selite選擇下一個用戶，然後單擊添加成員按鈕
• 按提交按鈕，保存新的團隊和團隊成員

難點：

• 我試圖通過寶石繭做的，但它是不可能使不同parshaly選擇用戶要添加到它（選擇），並已添加的成員（全名 - 文本）
• 如果通過<％= from_for ... remote：true％>以及控制器teams_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 

應用程序/模型/ 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 

應用程序/控制器/ 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表單。