如何使用用户定义的字段数制作表单？ - Ruby on Rails

Posted 2023-05-09

【中文标题】如何使用用户定义的字段数制作表单？ - Ruby on Rails

【英文标题】：How can I make a form with a user defined number of fields? - Ruby on Rails

【发布时间】：2020-02-18 20:53:01

【问题描述】：

我正在制作一个带有设置页面的 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();
    );

所以这个解决方案确实有效，尽管它非常笨重。我知道 Rails 助手可能会在后台做同样的事情，但我需要在其他页面上复制类似类型的表单，我觉得应该有一种更简洁的方法，而不是重复我已经写过的代码得到了。

有没有人有在 Ruby on Rails 中制作这种表单的经验？你用了什么技术？谢谢！

【参考方案1】：

要在其他页面上复制类似类型的表单，请使用partials。 将您觉得多余的内容保留在部分文件中，并随时使用。 为了更好地理解部分，请遵循官方文档 https://guides.rubyonrails.org/layouts_and_rendering.html#using-partials

【讨论】：

感谢您的回复@KABHIRAM。我很清楚部分。该 html 代码实际上是从页面的主视图调用的部分代码。问题是单击新的转化跟踪器图标时，这是一个 javascript 事件。如何从那里渲染部分并确保索引正确？