Rails简单的表单数组文本输入

Rails Simple form array text input

本文关键字：文本 输入 数组 表单 简单 Rails      更新时间：2024-03-14

我正在使用SimpleForm构建我的表单。

有了一个包含两个小数数组、权重[]和重复[]的模型，我使用本教程分别为这些数组中的每个数字制作了一个输入形式。

我的问题是我不知道如何使用javascript在表单中添加/删除字段。该教程的作者没有编写任何代码，"因为这是一项相当琐碎的任务"。我需要在哪里以及如何放置javascript来执行这些任务？

与添加嵌套记录不同，在添加嵌套记录时，您需要查询rails来创建与new相关的对象，这实际上只是使用javascript添加另一个输入。我可能需要帮助，因为这会让你的视野更清晰。因此，您必须创建一个构建输入字段的助手，在视图中调用该助手，使用几行javascript将助手中的数据放到您想要的页面上。

帮助者

module ApplicationHelper
    def link_to_add_weights(name)
    link_to name, '#', class: "add_weight_fields", :"data-field" => "<input class='text optional' type='text'  name='yourmodelname[weights][]' id='yourmodelname_'>"
  end
end

因此，它只需要一个参数，即链接中所需的名称，并将输入字段设置为要生成的链接上的数据属性。

javascript

$(document).ready(function(){
  $(".add_weight_fields").click(function(){
    $("#weights").append($(this).data("field"));
  });
});

助手正在生成一个类为.add_weight_fields的链接，因此您希望在单击该链接时触发javascript。一旦发生这种情况，您只需要从数据字段属性中附加数据，在本例中，我使用的是权重的css idd。

视图

<%= simple_form_for(@yourmodelname) do |f| %>
  <%= f.input :repetitions, as: :array %>
  <div id="weights">
    <%= f.input :weights, as: :array %>
    <%= link_to_add_weights "Add New Weight" %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

然后你会做同样的前重复。创建一个新的helper，创建一个全新的js方法（或者你可以让它DRY，并对两者使用相同的方法，但有一点条件），并在视图中添加一些识别css，让js与另一个链接一起查找。

相关文章：