如何在Bootstrap 4 Modal中呈现表演动作

Question

我正在用可点击图像链接的显示操作填充引导程序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/_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中调用它，因此会出现抛出错误。

如果你想在没有额外js脚本的情况下使用Bootstrap Modal，解决这个问题的方法是将_post部分代码带到_posts部分本身，并将<% end %>带到Modal之后的循环中。

<% @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）并使用ajaxget方法动态加载模态。出于更好的性能考虑，可以考虑使用这种方法。

---

我所说的第二个解决方案在这里得到了很好的解释：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