Rails使用JavaScript嵌套多態形式

Question

我要在表格上填寫以下內容：

度是與輪廓具有has_many關系的多態部分。 該部分稱為主要形式-配置文件。 通過按“添加資格”，用戶可以添加盡可能多的學位。 我只能將一個學位附加到個人資料，而最后一個學位則全部被忽略。 我什至不知道為什么會這樣，因為link_to無法傳遞配置文件實例。 所以我必須在degree_controller中創建新的配置文件，如您在我的代碼中看到的那樣。 提交“創建配置文件”時，最終的配置文件實例可以獲取上述所有其他信息。

請提供任何幫助，以便我可以將所有學位與形式相關聯，在過去的幾天中，我一直堅持使用SO和google的所有排列組合。 我已經准備好更改代碼了。任何對此的幫助將不勝感激。

Answer 1

我有這個小幫手來幫助我解決這些情況。 它可重復使用，因此您不必在同一應用程序中針對不同情況編寫所有這些東西。

首先是代碼：

module FormsHelper

  def data_for_field(f, subclass, options={})
    new_object = f.object.class.new.send(subclass.to_s).new(options[:attributes])
    id = new_object.object_id
    partial_path = options[:path] || new_object
    fields = f.fields_for(subclass, new_object, child_index: id) do |builder|
      render(partial_path, f: builder)
    end
    {id: id, fields: fields.gsub("\n", "")}
  end

end

一些JS魔術：

$(document).on('click', '.add-fields', function(e){
  var time = new Date().getTime();
  var regexp = new RegExp($(this).data('id'), 'g');
  var content = $(this).data('fields').replace(regexp, time);
  $(target).append(content);
  e.preventDefault();
});

現在進行視圖調用：

<%= form_tag .... do |f|
    <div id="list"></div>
    <%= link_to 'Add an Organisation', '#', class: 'add-fields', data: data_for_field(f, :degrees, path: "/degrees/fields").merge(target: "#list") %></p>
<% end %>

現在，在要使用的度數字段中創建局部的。

/degrees/_fields.html.erb

<%= content_tag :div do %>
  <%= f.input :name %>
<% end %>

現在說明：

對於data_for_field，您傳遞：f（形式），：degrees（關聯模型的復數名稱作為符號），以及任何其他選項，例如字段局部的路徑。 它基本上創建了表單字段的支架，並將其設置為“添加資格”鏈接上的數據屬性。 我已經合並到一個數據目標中，該目標具有在其中將新字段插入頁面的CSS ID。

當您單擊JS事件時，系統會觸發JS事件，並將表單字段中的ID替換為時間戳，因此對於每個資格，您都有一個唯一的密鑰。

我通常也有一些額外的JS事件，用於刪除字段。

希望這可以幫助。

Answer 2

這是一個多態嵌套關聯，可以在客戶端使用javascript處理。 因此，最后對於嵌套字段，我使用了插件Numerous.js 。 只需按照鏈接的qucikstart部分中給出的步驟進行操作，即從Github下載many.js文件並將其保存到資產/ javascript。

在我的代碼中

profile.rb

class Profile < ApplicationRecord
  has_many :degrees, :as => :degreeable
  accepts_nested_attributes_for :degrees, :reject_if => :all_blank, allow_destroy: true

  belongs_to :user, :class_name => 'User', :foreign_key => 'user_id'
end

degree.rb

class Degree < ApplicationRecord
   belongs_to :degreeable, polymorphic: true
end

型材/ _form.html.erb

    <div id="fields-for-list" class="numerous">
      <%= f.fields_for :degrees, Degree.new, :child_index => 'replace_this' do |degree_form| %>
         <%= degree_form.select :level, options_for_select(Job::EDUCATION, params[:level]), include_blank: "Select Degree", :class => 'span5' %>
         <%= degree_form.text_field :description, placeholder: "Add a new Degree here..."%>
         <%= link_to 'x Remove', '#', :class => 'numerous-remove', type: 'button' %>
     <% end %>
   </div>
   <div id="list"></div>
   <%= link_to (fa_icon 'plus').to_s + 'Add a Qualification', '#', :id => 'add-to-list' %>

最后，有了強大的參數，

  def profile_params
    params.require(:profile).permit(:user_id, :first_name, :last_name, degrees_attributes:[:id, :level, :description])
  end

請注意，我已經設置了度數表，其中有2個額外的字段用於多態關聯：- "degreeable_id" & "degreeable_type"並且在輸入數據庫時​​，這兩個字段會自動填充新創建的profile_id和'Profile'（名稱為將多態與度相關聯的模型）。

many.js中的技巧是使用唯一的臨時ID（例如Time.now.to_i）創建每個嵌套的表單記錄（此處為度），因此現在在客戶端創建/銷毀的每個度記錄都將具有一個diff degree_attribute'id'。 希望它能幫助別人。