javascript - Rails 简单形式数组文本输入

Question

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

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

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

Answer 1

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

helper

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。一旦发生这种情况，您只需附加 data-field 属性中的数据，在本例中我使用权重的 css idd。

View

<%= 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，并在稍有条件的情况下对两者使用相同的方法)，然后向 View 中添加一些标识 css，以便 js 与另一个链接一起查找。