javascript - 使用 Cocoon Rails 动态生成嵌套形式

Question

我有一个带有 cocoon 的嵌套表单，但在尝试从 JavaScript 计算总价时遇到问题。当我检查查看源页面时，字段生成的属性没有值属性。如果我使用@invoice.line_items.build，则会计算总价，但看不到茧的动态字段。谢谢并等待我很快能得到的任何帮助。

   class InvoicesController < ApplicationController

     before_action :set_invoice,:set_line_item, only: [:show, :edit, :update, :destroy]

     def index
       @invoices = Invoice.all
     end

     def show
     end

     def new
       @invoice = Invoice.new
      @invoice.line_items.build
     end

     # GET /invoices/1/edit
     def edit

     end

     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

    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

    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

    def set_line_item
      @line_item = LineItem.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.    
     def invoice_params
       params.require(:invoice).permit(:amount, :date, :currency, {line_items_attributes: 
        [:id,:quantity,:net_amount, :description, :unit_cost]})
     end

   end

<小时/>

 <tbody class='line_items'>
                <%= f.fields_for :line_items do |builder| %>
                <%= render 'line_item_fields', :f => builder %>
                <% end %> 
           </tbody>
      </table>
        <%= link_to_add_association 'add item', f, :line_items, class: "btn btn- 
  primary",data: {"association-insertion-node" => "tbody.line_items", "association-insertion-method" => "append"} %>
        <%= f.submit  class:"btn btn-primary" %>

<小时/>

  <tr class="nested-fields">
     <div class="container">
       <div class="row row-cols-5">
       <div class="col"> <td><%= f.text_field :description, class: "form-control item_desc" %></td></div><br/>
    <div class="col"> <td><%= f.text_field :quantity,  class: "form-control quantity" %></td></div><br/>
    <div class="col"> <td><%= f.text_field :unit_cost, class: "form-control unit_cost"%></td></div><br/>
    <div class="col"> <td class="price_td"><%= f.text_field  :net_amount, class: "form-control price", :readonly => true %></span> <span class= "subtotal_currency"></span></td></div><br/>
    <div class="col"> <td><%= link_to_remove_association 'Delete', f, class: 'remove_record btn btn-danger' %></td></div>
  </div>
</div>

这是 JavaScript

  function update_price(){ 
      var row = $(this).parents('.nested-fields');
      var price = row.find('.unit_cost').val() * row.find('.quantity').val();
      price = price.toFixed(2);
      isNaN(price) ? row.find('.price').val('is not a number') : 
      row.find('.price').val(price);
      update_subtotal();

  }

Answer 1

您可以使用以下代码附加事件:

$('.unit_cost').blur(update_price); 
$('.quantity').blur(update_price); 

但是，这只会将事件处理程序绑定(bind)到运行此命令时页面上的元素，并且有一个更好的方法可以实现相同的效果:

$(document).on('blur', '.unit_cost, .quantity', update_price)

我将事件附加到顶级document(因此这甚至可以与turbolinks兼容，但您也可以使用封闭的form或div)，我们响应模糊事件，但仅当触发元素具有类.unit_cost或.quantity时。