Question

我们说我有我的主页和Post模型。如果我想添加一个新的{{1}}，我会转到/ posts / new并创建一个{{1}}类的新对象。这是一种标准方式。

例如，我可以在我的主页中添加一个+按钮，它会打开一个小窗口，要求我输入标题和内容，并且与标准方式具有相同的效果吗？

Answer 1

简短回答是肯定的。

您必须按照以下步骤操作：

您添加帖子的表单应该是部分
单击+按钮时显示此部分
因为您使用了partial，所以操作将被发送到Post＃create
现在你只需要考虑重定向。如果您在Post＃create
你可以在内部请求发送重定向页面到主页，如果由于某种原因没有由ajax完成

这样你就不需要创建任何新的东西，只需使用现有的结构，这就是Rails的意义所在。把所有东西放在小小的平静处，并尽可能多地重复使用它们。

Answer 2

目前还不是很清楚你在问什么，但如果我说得对，你想在你的应用程序的任何地方添加Post。这很容易你应该创建一个模型实例并创建一个部分_form.html.erb并在你的应用程序中呈现

所以控制器内部

def index
  @new_post = Post.new
end

内部视图：

<%= render partial: "form", locals: {page: @new_post} %>

在_form partial

中

<%= form_for(page, remote: true) %>
...etc
<% end %>

如果您生成脚手架页面，您将通过生成器获得此部分。在那里，您可以检查部分的创建方式。

在您的视图中，您可以使用您想要的模型......等来添加新内容。您还可以检查UJS以使用ajax加载页面，以便它不刷新（remote：true）整页

修改

如果您想使用模态，这里是示例。我在这里使用引导程序，但你可以在任何地方应用它。所以在你的视图中（例如索引）将部分表单包装在bootstrap的标记内）就像这样

应用程序/视图/页/ index.html.erb

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#new-page-modal"> Add Page</button>

<div class="modal fade" id='new-page-modal'>
  <div class="modal-content">
   <%= render partial: "form", locals: {page: @new_post} %>
</div>

你可以包含其他部分，并在页脚内部显示按钮，只需触发提交表单，如$（＆＃39;＃new-page＆＃39;）。submit（）;你可以将它放在application.js

中

因此内部视图中有一个触发模态的按钮（data-target =＆＃34;＃new-page-model＆＃34;）。我使用此id命名模式，因此如果您在资产管道中包含bootstrap.js文件，则会打开它。之后，一旦模态可见，您就可以触发表单提交。

编辑2

以下是如何在引导程序表单内部有OK按钮触发提交事件

<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  <button type="button" class="btn ban-primary" onclick="javascript:$('#new_form').submit();$('#new-page-modal').modal('hide');return false;">Save changes</button>
</div>

所以这里提交按钮，因为它在我触发提交和关闭模态的表单之外。如果您想要处理错误，例如需要页面标题等等，那么您希望对此进行调整...因为最好使用远程表单的JS响应。

如果不清楚，请告诉我。

Answer 3

对于小窗口，您可以使用Bootstrap Modal。有示例代码here。

您可以通过AJAX编写in a way表格automatically sends the query。您可以使用listeners编写回调以显示成功或采取其他行动。

添加模型的新对象，而无需转到Rails中的/ model / new

3 个答案: