Rails 简单表单数组文本输入

Question

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

我有一个包含两个小数数组的模型，weights[] 和 repetitions[]，我使用 this 教程分别为这些数组中的每个数字制作了一个输入表单。

我的问题是我不知道如何使用 javascript 从表单中 add/remove 字段。教程作者没有放任何代码"because it’s rather trivial task"。我需要在哪里以及如何放置 javascript 来执行这些任务？

Answer 1

好吧，与添加嵌套记录不同，您需要查询 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

所以它的作用是接受一个参数，即您在 link 中想要的名称，并将输入字段设置为要生成的 link 上的数据属性。

javascript

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

助手正在生成一个 link，其中 class 为 .add_weight_fields，因此您想在单击 link 时触发您的 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 %>

然后你会重复同样的动作。创建一个新的助手，创建一个新的 js 方法（或者您可以将其设为 DRY 并在有条件的情况下对两者使用相同的方法），并在视图中添加一些标识 css 以便 js 与另一个一起查找link.

Rails 简单表单数组文本输入

Rails Simple form array text input

javascript

arrays

ruby-on-rails

simple-form

帮手

javascript

景色