在模态的索引页内呈现显示页面

假设我有一个脚手架帖子，只有一个字段，正文。我想通过单击仅显示而不是加载单独的显示页面来呈现任何帖子的显示页面，它会将其加载到模态中。有点像twitter<</p>

div class="one_answers">

我假设你正在使用Bootstrap，你想使用一个模态。您将使列表视图具有带有一些链接的模式。

现在要获取数据，我们可以在页面加载（假设数据属性）或通过 XHR 按需进行。

我喜欢按需获取东西...因此，让我们创建一个模态和一些链接。

<% @posts.each do |post| %>
  <%= link_to post.title, post_path(post), remote: true, data: { method: 'get' } %>
<% end %>
<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

然后在控制器中，我们需要让它放电...

class PostsController < ApplicationController
  def show
    @post = Post.find(params[:id])
    respond_to do |format|
      format.js
    end
  end
end

在看来show.js.erb我们将做这样的事情。

$('h4.modal-title').html("<%= @post.title %>");
$('.modal-body p').html("<%= @post.body %>");
$('.modal').modal();

让我知道它是否有错误，我只是把它写出来，模态代码直接来自 Bootstrap，无需编辑。您可能需要重构它们才能有意义。

您不能直接呈现整个显示页面，但可以使用部分显示页面来执行此操作。我建议创建一个部分，以封装您的显示页面和模态共有的所有视图信息。然后，您可以在显示页面和模态中引用该部分，从而减少重复代码的数量。

部件是带有下划线作为文件名的第一个字符的普通视图文件。例如：_post.html.erb .

您可以使用 render 命令在其他视图中呈现部分：

#show.html.erb
<%= render 'post' %>

我还会推荐布局和渲染的Rails指南

相关内容

最新更新

热门标签：