Как я могу сделать форму с определенным пользователем количеством полей? - Рубин на рельсах

Question

Я создаю приложение ruby ​​on rails со страницей настроек, где пользователь может ввести два поля: поле имени и значения, которое будет переведено при отправке формы в ключ и значение хэша.

Единственный сложный аспект заключается в том, что пользователь должен иметь возможность добавлять дополнительные «строки» в эту форму. Форма на странице в настоящее время выглядит следующим образом:

Итак, как вы можете видеть, нажатие на значок «плюс» создаст еще одно «действие преобразования». и нажав на значок «минус» удалит строку из поля. Пользователь должен иметь возможность добавлять столько конверсионных действий, сколько пожелает.

Довольно стандартно загружать этот хеш из базы данных и заполнять форму существующими значениями, но меня не устраивает мой текущий способ добавления дополнительных полей формы в форму.

Этоэто код для HTML-формы, используемой на странице:

<%= parent_form.fields_for :conversion_trackers_to_pull do |form| %>
  <div id="conversion-trackers-to-pull">
    <% section.conversion_trackers_to_pull.each_with_index do |(conversion_tracker_name, conversion_tracker_id), index| %>
      <div class="mb-2">
        <%= form.fields_for "conversion_tracker_#{index}".to_sym do |conversion_tracker| %>
          <%= conversion_tracker.label :conversion_action, "Conversion Action #{index+1}: " %>
          <%= conversion_tracker.text_field :name, value: conversion_tracker_name, placeholder: "Name" %>
          <%= conversion_tracker.text_field :id, value: conversion_tracker_id, placeholder: "ID" %>
        <% end %>
        <%= button_tag '<i class="fas fa-minus-circle"></i>'.html_safe, type: "button", class: "remove-conversion-tracker" %>
        <span class="index d-none"><%= index + 1 %></span>
      </div>
    <% end %>
  </div>
  <i class="far fa-plus-square" id="<%= "#{section_name}" %>-new-conversion-tracker"></i>
<% end %>

И это код JQuery, используемый для события нажатия кнопки «плюс»:

$('#search-new-conversion-tracker').on('click', function() {
      var index = parseFloat(($('#search-conversion-trackers-to-pull').find('.index').last().text()));
      if (!index) {
        index = 0;
      }
      $(this).prev('#conversion-trackers-to-pull').append(
       '<div class="mb-2">' +
          '<label for="_search_section_config_conversion_trackers_to_pull_conversion_tracker_' + index + '_conversion_action">Conversion Action ' + (index+1) + ': </label>&nbsp;' +
          '<input type="text" name="[search_section_config][conversion_trackers_to_pull][conversion_tracker_' + index + '][name]" id="_search_section_config_conversion_trackers_to_pull_conversion_tracker_' + index + '_name" placeholder="Name">&nbsp;' +
          '<input type="text" name="[search_section_config][conversion_trackers_to_pull][conversion_tracker_' + index + '][id]" id="_search_section_config_conversion_trackers_to_pull_conversion_tracker_' + index + '_id" placeholder="ID">&nbsp;' +
          '<button name="button" type="button" class="remove-conversion-tracker"><i class="fas fa-minus-circle"></i></button>' +
          '<span class="index d-none">' + (index + 1) + '</span>' +
       '</div>'
      );
      bindRemoveConversionTracker();
    });

Так что это решение делаетработать, хотя это очень неуклюже. Я знаю, что помощник рельсов, вероятно, будет делать то же самое под капотом, но мне нужно скопировать подобный тип формы на других страницах, и я чувствую, что должен быть более чистый способ, чем просто повторить код, который я ужеполучил.

У кого-нибудь есть опыт создания такой формы в Ruby on Rails? Какой техникой вы пользовались? Спасибо!

Answer 1

Чтобы скопировать подобный тип формы на других страницах, используйте partials . Сохраняйте то, что вы считаете лишним, в частичном файле и используйте его в любое время. Для лучшего понимания частичностей следуйте официальной документации https://guides.rubyonrails.org/layouts_and_rendering.html#using-partials