如何使用用戶定義的字段數制作表單？ - 導軌上的 Ruby

Question

我正在使用設置頁面在 Rails 應用程序上制作 ruby，用戶可以在其中輸入兩個字段，一個名稱和值字段，將在表單提交時轉換為 hash 的鍵和值。

唯一復雜的方面是用戶需要能夠向此表單添加額外的“行”。 當前頁面上的表單如下所示：

如您所見，單擊“加號”圖標將創建另一個“轉換操作”，單擊“減號”圖標將從字段中刪除一行。 用戶應該能夠根據需要添加任意數量的轉化操作。

從數據庫加載此 hash 並使用現有值填充表單是非常標准的，但我對當前向表單添加其他表單字段的方式不滿意。

這是頁面上使用的 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();
    });

所以這個解決方案確實有效，盡管它非常笨重。 我知道 Rails 助手可能會在后台做同樣的事情，但我需要在其他頁面上復制類似類型的表單，我覺得應該有一種更簡潔的方法，而不是重復我已經寫過的代碼得到。

有沒有人有在 Ruby on Rails 中制作這種表格的經驗？ 你用了什么技術？ 謝謝！

Answer 1

要在其他頁面上復制類似類型的表單，請使用partials 。 將您覺得多余的內容保留在部分文件中，並隨時使用。 為了更好地理解部分，請遵循官方文檔https://guides.rubyonrails.org/layouts_and_rendering.html#using-partials