如何在 Bootstrap 4 Modal 中渲染显示动作？

Question

我正在使用可点击图像链接的显示操作填充 bootstrap 4 模式。我目前正在使用 Carrierwave 上传图像。此时，当我单击图像时，仅显示模态叠加层。里面有内容的模态容器根本不显示。

用户/Show.html.erb

<div class= "container">
<div class="username">@user.username</div>
<div class="posts_container_pos">
        <hr style="border: 2px solid #515558;">
          <%= render 'posts/posts', post_items: @user.posts %>
      </div>
</div>

帖子/_Posts.html.erb

    <div class"container-fluid">
    <%= @post_items.each do |post| %>
    <%= link_to image_tag(post.photo.url(:medium), style: 'height: 300px; width: 500px;'), modal_post_path(post), data: {:toggle => 'modal', :target => '#reusable_modal'}, lazy: true %>

   <div id="post-modal" class="modal fade"></div>

      <!-- Modal -->
      <div class="modal fade" id="reusable_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">

          </div>
        </div>
      </div>
<% end %>

<script type= "text/javascript">
  $(document).on('page:change', function () {
      $(document).on('click', '#reusable_modal [data-dismiss="modal"]',
          function (e) {
            $(e.target).removeData('bs.modal');
            $('#reusable_modal').find('.modal-content').empty();
          });
      $(document).on('click', '[data-target="#reusable_modal"]', function (e) {
        $("#reusable_modal").find(".modal-content").load($(this).attr("href"));
      });
    });
</script>
</div>

帖子/Modal.html.erb

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <i><%= image_tag(@post.user.avatar_url(:thumb), class: 'round-image-50') %></i>
  <h4 class="modal-title" id="myModalLabel" style="margin-left: 60px; margin-top: -42px;"><%= post.user.username %></h4>
</div>
<div class="modal-body">
  <% if @post.photo.present? %>
  <%= image_tag(@post.photo.url(:large), style: 'max-width: 570px;') %>
  <% end %>
  <div class="modal_post_pos">
    <%= sanitize content_with_emoji(@post.body) %>
  </div>
</div>
<div class="modal-footer">
  <%= render partial: 'comments/template', locals: {commentable: @post, new_comment: @comment} %>
</div>

Users_Controller.rb

 def show
        if params[:id].to_s.match(/^[0..9]+$/) && !User.friendly.exists?(params[:id])
          render 'public/404.html', status: 404
        else
          @user = User.friendly.find(params[:id])
          @post_items = @user.posts.paginate(page: params[:page])
        end
  end

Posts_Controller.rb

def modal
    render layout: false
 end

 def show
    @post = Post.find(params[:id])
    @new_comment = Comment.build_from(@post, current_user.id, "")
    respond_to do |format|
      format.html
      format.js
      format.json {render json: @post }
    end
  end

Routes.rb

resources :posts, except: [:edit, :update] do
    member do
      get 'like', to: 'posts#like'
      get 'dislike', to: 'posts#unlike'
      get :modal
    end
  end

服务器日志

Started GET "/posts/13/modal" for 127.0.0.1 at 2016-04-11 11:41:00 -0400
  ActiveRecord::SchemaMigration Load (0.5ms)  SELECT "schema_migrations".* FROM "schema_migrations"
Processing by PostsController#modal as HTML
  Parameters: {"id"=>"13"}
  User Load (0.5ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ?  ORDER BY "users"."id" ASC LIMIT 1  [["id", 5]]
  Rendered posts/modal.html.erb (47.5ms)
Completed 500 Internal Server Error in 240ms (ActiveRecord: 1.5ms)

NoMethodError - undefined method `user' for nil:NilClass:
  app/views/posts/modal.html.erb:5:in `_app_views_posts_modal_html_erb__227267806_63456696'

Answer 1

由于您没有在 _posts 部分上定义任何实例变量 @post 并且仍在尝试在 _posts 内调用它，因此会引发错误。

如果您想使用 Bootstrap Modal 而不需要额外的 js 脚本，解决此问题的方法是将 _post 部分代码带到 _posts 部分本身和 <% end %> 模态之后的循环。

<% @post_items.each do |post| %>

<%= link_to image_tag........................

<!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <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" id="myModalLabel">Post Show</h4>
              </div>
              <div class="modal-body">
             # complete partial code goes here 
              </div>
            </div>
          </div>
        </div>
<% end %>

---

显然，上述方法对性能不利，因为它会在不需要它的情况下渲染所有内容。

更好的方法是使用Ajax 和jQuery（我的偏好）。监听此button 事件（onClick）并使用ajax get 方法动态加载模式。考虑考虑这种方法以获得更好的性能。

---

我所说的第二种解决方案在这里得到了很好的解释：https://stackoverflow.com/a/22144587/2545197

Answer 2

也许是这样的？

在你的 JS 中

var $modal = $('#ajax-modal');

$.fn.modalmanager.defaults.backdropLimit = 1;

$('.modal-link').on('click', function(){
  var modal_url = $(this).data("modal-url");

  if(modal_url != null){
    // create the backdrop and wait for next modal to be triggered
    $('body').modalmanager('loading');

    $modal.empty().load(modal_url, '', function(){
      $modal.modal();
      // Any callback functions such as let's say selectpicker
      // $('#ajax-modal .selectpicker').selectpicker('refresh');
    });
    return false;
  }
});

在ERB中

<%= link_to 'Show', post_path(@post), class: 'modal-link', data: { modal_url: post_path(@post) } %>

Answer 3

我通过简单地渲染模式显示视图的文件而不是正常的显示操作来解决这个问题。

  def show
    @post = Post.find(params[:id])
    @new_comment = Comment.build_from(@post, current_user.id, "")
    respond_to do |format|
      format.html {render :file => "posts/modal", layout: false}
      format.js {render :file => "posts/modal", layout: false}
      format.json {render json: @post }
    end
  end