在模态上的索引页面内渲染显示页面

时间:2017-10-26 13:53:11

标签: ruby-on-rails ruby-on-rails-5

假设我有一个只有一个字段,body的Scaffolded Post。我想通过单击show来渲染任何帖子的显示页面,而不是加载一个单独的显示页面,它将它加载到一个模态中。有点像推特

2 个答案:

答案 0 :(得分:1)

您无法直接渲染整个显示页面,但可以使用部分显示。我建议creating a partial封装显示页面和模式所共有的所有视图信息。然后,您可以在显示页面和模式中引用该部分,从而减少重复代码的数量。

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

使用render命令在其他视图中呈现部分:

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

我还建议Rails Guide on Layouts and Rendering

答案 1 :(得分:1)

我假设您正在使用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而没有编辑。你可能不得不重构它们才有意义。