助手

Question

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

有一个带有两个小数组，weight []和重复[]的模型，我使用this教程分别为这些数组中的每个数字创建一个输入表单。

我的问题是我不知道如何使用javascript从表单中添加/删除字段。本教程的作者没有提出任何代码“因为这是一项相当简单的任务”。我需要在哪里以及如何使用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

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

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 %>

然后你会做同样的重复。创建一个新的帮助器，创建一个新的js方法（或者你可以让它干并使用相同的方法同时使用一点条件），并在视图中添加一些识别css，以便js与另一个链接一起查找。

Rails简单表单数组文本输入

1 个答案:

助手

javascript

视图