在Rails中動態生成三級深層嵌套表單

Question

我正在嘗試使用此問題中列出的示例創建一個包含動態生成內容的深層嵌套表單。 然而，當我嘗試深入一個以上時，我遇到問題，因為內容生成在第一個生成的表單中不止一次發生，並且當我嘗試從第二級生成的內容添加字段時不會發生任何事情。

簡化的模型布局，

Task
  has_one VendorUpload
    has_many VendorShippingLogs
      has_many VendorShippingLogProducts

供應商運輸日志產品是我被困的地方，因為該表單試圖在供應商運輸日志內容中生成其內容，該內容本身是動態生成的，我不確定如何將其編碼到自己的幫助程序中。 附加代碼，

型號 - >

class Task < ApplicationRecord
  has_one :vendor_upload, :dependent => :destroy
  has_many :vendor_shipping_logs, :through => :vendor_upload
  has_many :vendor_shipping_log_products, :through => :vendor_shipping_logs

  accepts_nested_attributes_for :vendor_upload, :reject_if => :upload_type_blank, :allow_destroy => true

end

class VendorUpload < ApplicationRecord

  belongs_to :task
  has_many :vendor_shipping_logs, inverse_of: :vendor_upload, :dependent => :destroy
  has_many :vendor_shipping_log_products, :through => :vendor_shipping_logs

  accepts_nested_attributes_for :vendor_shipping_logs

end

class VendorShippingLog < ApplicationRecord

  belongs_to :vendor_upload
  has_many :vendor_shipping_log_products, inverse_of: :vendor_shipping_log, :dependent => :destroy

  accepts_nested_attributes_for :vendor_shipping_log_products

end

class VendorShippingLogProduct < ApplicationRecord

  belongs_to :vendor_shipping_log

end

tasks_controller.rb

def new
  @task = Task.new
  @task.build_vendor_upload.vendor_shipping_logs.build.vendor_shipping_log_products.build

end
private
  def task_params
    params.require(:task).permit!
  end

application_helper.rb - >

  def new_child_fields_template(form_builder, association, options = {})
    options[:object] ||= form_builder.object.class.reflect_on_association(association).klass.new
    options[:partial] ||= association.to_s.singularize
    options[:form_builder_local] ||= :f

    content_for :jstemplates do
      content_tag(:div, :id => "#{association}_fields_template", :style => "display: none") do
        form_builder.fields_for(association, options[:object], :child_index => "new_#{association}") do |f|
          render(:partial => options[:partial], :locals => { options[:form_builder_local] => f })
        end
      end
    end
  end

  def add_child_link(name, association)
    link_to(name, "javascript:void(0)", :class => "add_child btn btn-success btn-sm fa fa-plus-circle", :style => "margin-left: 15px;margin-top: 15px;", :"data-association" => association)
  end

  def remove_child_link(name, f)
    f.hidden_field(:_destroy) + link_to(name, "javascript:void(0)", :style => "height: 30px; margin-left: 5px;", :class => "remove_child btn btn-danger fa fa-close")
  end

new.html.erb - >

<%= form_for @task, url: tasks_path, method: :post, :html => {:multipart => true } do |f| %>
  <%= f.fields_for :vendor_upload do |ff| %>
    <%= ff.fields_for :vendor_shipping_logs do |fff| %>
      <%= render "vendor_shipping_log", :f => fff %>
    <% end %>
    <p><%= add_child_link " Add Customer", :vendor_shipping_logs %></p>
    <%= new_child_fields_template f, :vendor_shipping_logs %>
  <% end %>
<% end %>
<div id="jstemplates">
  <%= yield :jstemplates %>
</div>

_vendor_shipping_log.html.erb - >

<%= f.fields_for :vendor_shipping_log_products do |ff| %>
  <%= render "vendor_shipping_log_product", :f => ff %>
<% end %>
<%= new_child_fields_template f, :vendor_shipping_log_products %>
<p><%= add_child_link " Add Product", :vendor_shipping_log_products %></p>

<%= remove_child_link "", f %>

_vendor_shipping_log_product.html.erb - >

<div class="fields">
  <div class="form-group form-group-sm">
    <%= f.label :item_id, "Item ID:", class: 'col-sm-3 control-label' %>
    <div class="col-sm-9">
      <div style="display: inline-flex;">
        <%= f.text_field :item_id, class: "form-control" %>
      </div>
    </div>
  </div>
  <%= remove_child_link "", f %>
</div>

application.js - >

$(function() {
  $('a.add_child').click(function() {
    var association = $(this).attr('data-association');
    var template = $('#' + association + '_fields_template').html();
    var regexp = new RegExp('new_' + association, 'g');
    var new_id = new Date().getTime();
    $(this).parent().before(template.replace(regexp, new_id));
    $()
    return false;
  });
});
$(function(){
  $(document).on("click", 'a.remove_child', function() {
    var hidden_field = $(this).prev('input[type=hidden]')[0];
    if(hidden_field) {
      hidden_field.value = '1';
    }
    $(this).parents('.fields').hide();
    return false;
  });
});

這里的代碼基本上模仿了示例中的所有內容，並且適用於一個級別的深層嵌套屬性，但除此之外的任何內容都無法正常工作。 嘗試單擊上面代碼中的“添加產品”按鈕時，我沒有收到任何反饋。

我希望我能夠清楚地說明這里的所有內容，因為這是一個難以解釋為新手的問題。 會欣賞正確方向的任何一點！

Answer 1

這可能值得一試：

$(function() {
  $(document).on('click', 'a.add_child', function() {
    var association, new_id, regexp, template;
    association = $(this).attr('data-association');
    template = $('#' + association + '_fields_template').html();
    regexp = new RegExp('new_' + association, 'g');
    new_id = (new Date).getTime();
    $(this).parent().before(template.replace(regexp, new_id));
    $();
    return false;
  });
});

jQuery中的普通click事件不會綁定到動態生成的內容。 您應該使用on 。