Блог

У меня есть форма, части которой динамически генерируются на основе пользовательского выбора, и это можно делать бесконечно раз. Моя настройка выглядит следующим образом: Визуализации имеют множество строк, строки имеют множество панелей. Когда вы выбираете добавить строку в визуализацию, появится новая строка, и оттуда вы можете добавлять панели (до 3).

 <div id="rows" class="row">
  <%= f.fields_for :rows do |row| %>
  <%= render 'row_fields', :f => row %>
  <% end %>
  <div class="rowz_links">
    <%= link_to_add_association "Add Row", f, :rows %>
  </div>
</div>  

В Cocoon есть этот потрясающий обратный вызов, называемый after-insert, который позволяет вам манипулировать html после вставки строки. Я пытаюсь реализовать выпадающее окно foundation в каждой строке. Для этого мне нужно создать экземпляр foundation в каждой динамически генерируемой строке. Кроме того, выпадающий список Foundation полагается на ID для работы.

Итак, что я попытался сделать, это с некоторой помощью:

 $('#rows')
  .on('cocoon:after-insert', function() {
    var dropdown_id = 'dynamic_dropdown-'   $('.pane_dropdown').size();

    $(this).find('.fa-plus-square').attr('data-toggle', dropdown_id);
    $(this).find('.dropdown-pane').attr('id', dropdown_id);
    $(this).find('.pane_dropdown').foundation();
  });  

 <div class="nested-fields">
  <div class="field">
    <%= f.label :rowtitle, 'Row Title', class: "row_title" %>
    <%= f.text_field :rowtitle, class: "row_title_input" %>
    <div class="pane_dropdown">
      <button class="fa fa-plus-square fa-2x" type="button"></button>
      <div class="dropdown-pane" data-dropdown data-hover="true" data-hover-pane="true">
        <%= link_to_add_association 'Add 1', f, :panes, count: 1, partial: 'one_pane_field', id: "testingpaneone" %>
        <%= link_to_add_association 'Add 2', f, :panes, count: 2, partial: 'two_pane_fields', id: "testingpanetwo" %>
        <%= link_to_add_association 'Add 3', f, :panes, count: 3, id: "testingpanethree" %>
      </div>
    </div>
  </div>
</div>  

Кроме этого, каждый раз, когда генерируется новая строка, он каждый раз находит первую «строку» и присваивает ей динамически сгенерированный идентификатор. Я не уверен, как это обойти..

Похоже, причина, по которой «первой строке» каждый раз присваивается идентификатор, связана с областью $(this) в вашем обработчике событий, ссылающейся на $('#rows') (контейнер для всех ваших строк)

Из документов (и адаптировано к вашему сценарию):

 $('#rows').on('cocoon:after-insert', function(e, insertedItem) {
     // ... do something
});

...where e is the event and the second parameter is the inserted or
removed item. This allows you to change markup, or add
effects/animations.
  

Итак, похоже, что cocoon передает insertedItem в качестве второго параметра в обратный вызов события! (что звучит как ссылка, которую вы ищете)