Question

我正在使用宝石https://github.com/ryanb/nested_form，我的模型有accepts_nested_attributes_for。虽然它很好用，但有时我希望能够在页面上添加/删除（主要是添加）表单，该表单总是通过按钮添加/删除：

.row
  #tasks
    = f.fields_for :tasks do |task_form|
      ..............

      = task_form.link_to_remove "Remove", class: "btn btn-danger"
      = f.link_to_add  "Add task", :tasks, class: "btn btn-default", data: { target: "#tasks" }

换句话说，我想动态点击link_to_add和link_to_remove（而不是鼠标），可能是通过调用nested_form gem中应该存在的方法。当然，我可以通过javascript通过触发点击事件来获取按钮，但我的直觉告诉我必须有一个更简单，更自然的方法。有没有？

更新：

我当然可以使用javascript。对于按钮的触发点击事件，我不是很好，因为nested_form中必须有一个更简单，更标准的方式。

Answer 1

我不确定你要在这里完成什么。一方面，你说你想动态地做，但同时，你不想使用JavaScript。听起来与我相矛盾。

任何方式，如果您使用new方法：

def new
  @to_do = ToDo.new
  @to_do.tasks.build
end

然后在您的form中，您将在页面加载时显示一组任务字段，而无需点击add按钮。

我不知道这是你正在寻找的东西，还是别的东西。

PS：我没有看到JavaScript的不自然。您正在使用的这个gem完全依赖于JavaScript。

<强>更新

现在你已经更新了你的问题。我建议阅读gem的源代码，找出哪个函数绑定到按钮点击事件。然后，您可以将相同的功能绑定到您喜欢的任何事件。

话虽如此，让我们来看看这个文件：

https://github.com/ryanb/nested_form/blob/master/vendor/assets/javascripts/jquery_nested_form.js

查看底部的几行。添加按钮单击事件绑定到nestedFormEvents.addFields功能。继续将您的事件绑定到此功能，您不必触发按钮单击。

Answer 2

<强> DOM

这个解决方案的javascript元素，正如San所提到的那样，总是存在（已经存在）;所以这个问题是在JS中完成还是不在中应该<我是怎么做的？“

坦率地说，我并不完全明白你要做的事情 - 如果这个答案看起来有点宽泛，那么道歉：）

底线是您的答案完全取决于DOM (document object model) - 这是基本上您加载的HTML页面，您的浏览器将“消化”

Javascript着名的工作原理是坐在DOM之上，允许您通过绑定事件与页面上的各种元素进行交互。

每次在页面上动态更改内容（“不刷新”）都是通过Javascript对DOM的操作完成的。这意味着如果您希望在不重新加载页面的情况下操作DOM，那么您将在路径的某处使用Javascript

<强>建议

你提到你想“点击链接dynamically” - 你的意思是什么？

如果要从表单中加载/删除元素，则需要使用Ajax从控制器加载表单元素，或复制具有不同ID的元素（我认为{ {1}}无论如何都这样做了）

如果您提供有关您要实施的用例的详细信息，那将会有很长的时间。从我所看到的 - 我猜你是否想要在满足某些参数的情况下添加文件（例如点击一个复选框）？

link_to_add和link_to_remove - 动态点击它们

2 个答案: