Ruby on rails 如何动态更改表单？

我有两种不同的模型，分别称为

Parent

和

Child

我有一个名为

House

的页面，上面有两个表单的

链接：

pages/house.html.erb

链接到“父级”，新的父级路径

链接到“Child”，新的Child路径

当您在页面上开始时，它是空的，没有表单

我希望能够单击
new\u parent
链接并在同一页面上生成父表单，但是如果我单击
new\u child
链接，我希望删除父表单并通过AJAX将其替换为子表单。我将如何做到这一点？
我认为如果没有Ajax，而使用css，那么做起来会更容易。在页面中生成2个表单（例如使用partials），并将其放入隐藏的div中（css样式：
display:none
），并使用javascript和链接来显示/隐藏包含要显示的表单的div（使用JQuery）
我认为没有Ajax，但使用css会更容易。在页面中生成2个表单（例如使用partials），然后将其放入一个隐藏的div中（css样式：
display:none
），并在链接中使用javascript显示/隐藏包含要显示的表单的div（使用JQuery）
，这实际上创建起来非常简单。帮助我更好地理解AJAX和jquery

让我们以父对象为例：

我将
format.js
放在我的控制器中，以执行
新操作：

ParentsController

def new
 @parent = Parent.new

 respond_to do |format|
  format.js
 end
end

作为个人选择，我删除了我的
父母/new.html.erb
，并将其替换为
新的.js.erb
，该链接将由我的
“父母”链接调用

# parents/new.js.erb

$("#generate-form").html("<%= escape_javascript(render(:partial => 'parents/form', locals: { parent: @parent })) %>");

然后我有一个页面包含两种形式

PagesController

def index

  respond_to do |format|
    format.html
  end
end

然后单击该页面上父级和子级的链接

#pages/index.html.erb

<li><%= link_to "Parent", new_parent_path, :remote => true %></li>
<li><%= link_to "Child", new_child_path, :remote => true %></li>

<div id="generate-form">
</div>          

#pages/index.html.erb
正确%>
正确%>

我的链接和表单的
remote=>true
将响应我的
new
操作的
js
格式，而我的
div id=“generate form”
充当主控，将其中任何一个表单部分放在其中。这会根据单击的链接自动将一个替换为另一个，从而动态更改表单

注意：子模型的代码相同（表单字段除外）。只需替换模型名（从父到子）。
这实际上非常容易创建。帮助我更好地理解AJAX和jquery

让我们以父对象为例：

我将
format.js
放在我的控制器中，以执行
新操作：

ParentsController

def new
 @parent = Parent.new

 respond_to do |format|
  format.js
 end
end

作为个人选择，我删除了我的
父母/new.html.erb
，并将其替换为
新的.js.erb
，该链接将由我的
“父母”链接调用

# parents/new.js.erb

$("#generate-form").html("<%= escape_javascript(render(:partial => 'parents/form', locals: { parent: @parent })) %>");

然后我有一个页面包含两种形式

PagesController

def index

  respond_to do |format|
    format.html
  end
end

然后单击该页面上父级和子级的链接

#pages/index.html.erb

<li><%= link_to "Parent", new_parent_path, :remote => true %></li>
<li><%= link_to "Child", new_child_path, :remote => true %></li>

<div id="generate-form">
</div>          

#pages/index.html.erb
正确%>
正确%>

我的链接和表单的
remote=>true
将响应我的
new
操作的
js
格式，而我的
div id=“generate form”
充当主控，将其中任何一个表单部分放在其中。这会根据单击的链接自动将一个替换为另一个，从而动态更改表单

注意：子模型的代码相同（表单字段除外）。只需替换模型名称（从父到子）。
但是如果我有更多的模型，如
汽车
，
狗
等，会发生什么？这不会使页面加载时间更长吗？对于创建新项的表单，您不会访问数据库，页面加载时间也不会显著增加。如果您需要表单来编辑现有的东西，那么您仍然应该在CSS中这样做，并使用JSON来填充它们。但是，如果我有更多的模型，例如
Car
、
Dog
，会发生什么呢？这不会使页面加载时间更长吗？对于创建新项的表单，您不会访问数据库，页面加载时间也不会显著增加。如果您需要表单来编辑现有的东西，那么您仍然应该在CSS中这样做，并使用JSON来填充它们。