茧：更改呈现添加的表单字段的位置

Question

我有一个使用 cocoon 动态添加表单域的表单。问题在于造型。表单字段被添加到错误的位置。这是我的代码：

<div class="col-md-5>
    <!--content here !-->
</div>
<div class="col-md-2">
    <!-- more content here !-->
</div>
<%= form_for @owner do |f| %>
    <div class="col-md-4">
        <%= f.fields_for :cars do |car| %>
            <%= render 'cars_fields', :f => car %>
        <% end %>

        <div class="row text-center center-block">
            <%= f.submit "send", class: 'btn btn-default' %>
        </div>  
    </div>
    <div class="col-md-1">
        <%= link_to_add_association f, :cars, class: 'btn bgm-cyan btn-float waves-effect' do %>
            <i class="md md-add"></i>
        <% end %>
    </div>
<% end %>

这里是部分代码 car_fields:

<div class="form-group" style="padding: 10px 40px;" >
    <%= f.text_field :make, class: 'form-control input-sm', placeholder: "Car Make"%>
</div>

我希望 link_to_add_association 按钮位于表单的右侧。按下时，我希望新的表单字段出现在 col-md-4 内。相反，它出现在页面上所有内容的下方。如何让新的表单域出现在 col-md-4 中？我认为这与 data-association-insertion-node 或 data-association-insertion-method 有关，但文档很难。

Answer 1

来自文档https://github.com/nathanvda/cocoon

data-association-insertion-node : the jquery selector of the node. Default: parent node

data-association-insertion-method : jquery method that inserts the new data. before, after, append, prepend, etc. Default: before

data-association-insertion-traversal : the jquery traversal method to allow node selection relative to the link. closest, next, children, etc. Default: absolute selection

所以通过使用默认的遍历方法 absolute ，你可以这样做

<%= form_for @owner do |f| %>
<div id="place-to-insert" class="col-md-4">
    <%= f.fields_for :cars do |car| %>
        <%= render 'cars_fields', :f => car %>
    <% end %>

    <div class="row text-center center-block">
        <%= f.submit "send", class: 'btn btn-default' %>
    </div>  
</div>
<div class="col-md-1">
    <%= link_to_add_association f, :cars, class: 'btn bgm-cyan btn-float waves-effect0', data: {association_insertion_method: "append", association_insertion_node: "#place-to-insert"} do %>
        <i class="md md-add"></i>
    <% end %>
</div>