Rails 表格内的嵌套形式（茧宝石）

Question

我正忙于一个发票应用程序，我正在尝试将 cocoon gem 中的嵌套表单放入 <tbody></tbody> 中。嵌套表单运行良好，但它没有出现在<tbody></tbody> 中，而是出现在表头上方的某个随机位置。我认为这是因为您不能在表格主体中包含<div class=nested-fields></div>，但我不确定如何以不同的方式进行操作。

我的发票/_form.html.erb 中有这个：

<%= form_for @invoice do |f| %>
<% if @invoice.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@invoice.errors.count, "error") %> prohibited this invoice from being saved:</h2>

      <ul>
      <% @invoice.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
        <div class="row">
          <div class="col-sm-12">
            <table class="table table-striped">
              <thead>
              <tr>
                <th class="hidden-480"> Hoeveelheid </th>
                <th class="hidden-480"> Beschrijving </th>
                <th class="hidden-480"> Bedrag </th>
                <th class="hidden-480"> Totaal </th>
                <th class="hidden-480"> Btw(%) </th>
              </tr>
              </thead>
              <tbody>
                <%= f.fields_for :products do |product| %>
                <%= render 'product_fields', f: product %>
                <%= link_to_add_association 'Item toevoegen', f, :products, class: 'btn btn-primary btn-success' %>
                <% end %>
              </tbody>
            </table>
          </div>
        </div>
   <% end %>

invoices/_product_fields.html.erb

<div class="nested-fields">
    <tr>
      <td> <%= f.text_field :quantity %> </td>
      <td> <%= f.text_area :description %> </td>
      <td> <%= f.number_field :unitprice %> </td>
      <td> €200  </td>
      <td> <%= f.select(:btw, [[' 21%', 21, title: '21%'],[' 6%', 6, title: '6%'], [' 0%', 0, title: '0%']]) %> </td>
    </tr>
  <%= link_to_remove_association 'x', f, class: 'btn btn-primary btn-danger' %>
</div>

Invoice.rb - 型号

class Invoice < ActiveRecord::Base

  has_one :company
  has_one :customer
  has_many :products

  accepts_nested_attributes_for :customer, reject_if: :all_blank, allow_destroy: true
  accepts_nested_attributes_for :products, reject_if: :all_blank, allow_destroy: true
  validates :number, :currency, :date, :duedate, :btwtotal, :subtotal, :total, presence: true

end

Product.rb - 型号

class Product < ActiveRecord::Base

 belongs_to :invoice


end

Invoices_controller.rb

class InvoicesController < ApplicationController
  before_action :set_invoice, only: [:show, :edit, :update, :destroy]

  # GET /invoices
  # GET /invoices.json
  def index
    @invoices = Invoice.all
  end

  # GET /invoices/1
  # GET /invoices/1.json
  def show
  end

  # GET /invoices/new
  def new
    @invoice = Invoice.new
    @invoice.products.build
  end

  # GET /invoices/1/edit
  def edit
  end

  # POST /invoices
  # POST /invoices.json
  def create
    @invoice = Invoice.new(invoice_params)

    respond_to do |format|
      if @invoice.save
        format.html { redirect_to @invoice, notice: 'Invoice was successfully created.' }
        format.json { render :show, status: :created, location: @invoice }
      else
        format.html { render :new }
        format.json { render json: @invoice.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /invoices/1
  # PATCH/PUT /invoices/1.json
  def update
    respond_to do |format|
      if @invoice.update(invoice_params)
        format.html { redirect_to @invoice, notice: 'Invoice was successfully updated.' }
        format.json { render :show, status: :ok, location: @invoice }
      else
        format.html { render :edit }
        format.json { render json: @invoice.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /invoices/1
  # DELETE /invoices/1.json
  def destroy
    @invoice.destroy
    respond_to do |format|
      format.html { redirect_to invoices_url, notice: 'Invoice was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

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

    # Never trust parameters from the scary internet, only allow the white list through.
    def invoice_params
      params.require(:invoice).permit(:number, :currency, :date, :duedate, :btwtotal,
                                      :subtotal, :total, :footer, customers_attributes: [:id, :company_name, :address_line_1, :zip_code, :_destroy],
                                      companies_attributes: [:id, :btw_number, :iban_number, :kvk_number, :company_name, :_destroy],
                                      products_attributes: [:id, :quantity, :description, :unitprice, :btw, :total])
    end
end

知道发生了什么吗？非常感谢您的帮助！

Answer 1

您可以简单地使用 cocoon gem 提供的内置方法进行 link_to_add_association，

参考： https://github.com/nathanvda/cocoon#link_to_add_association

<%= link_to_add_association 'Item toevoegen', f, :products,:"data-association-insertion-node" => "tbody#{id of tbody encapsulating your fields_for}",:"data-association-insertion-method" => "append",  class: 'btn btn-primary btn-success' %>

PS这是我在stackoverflow中的第一个答案，所以如果我不够清楚，我提前道歉。

Answer 2

您可以参考cocoon gem 的控制插入行为部分以获取更多关于插入嵌套字段的参考。

例如，

$(document).ready(function() {
    $("#owner a.add_fields").
      data("association-insertion-method", 'append').
      data("association-insertion-traversal", 'closest').
      data("association-insertion-node", '#parent_table');
});