Question

我正在使用Twitter Bootstrap模态功能并从远程位置加载数据。我正在为一组缩略图提供远程URL，希望一旦点击缩略图，就会显示相应的数据（图像的大版本）。我正在使用html声明式样式来定义远程URL和模态的所有功能。

我发现Twitter引导模式加载第一个远程URL然后不显示后续远程数据（尽管在Chrome中对正确的URL进行了请求）但始终显示第一个加载的数据。如何让它显示正确的数据？

查看：

#gallery-navigation
  %ul
    - @profile.background_images.each do |image|
      %li
        = link_to image_tag(image.background_image.url(:thumb)), remote_image_path(image.id), :role => "button", :data => {:toggle => "modal", :target => "#image-modal", :remote => remote_image_path(image.id)}

/ Modal
#image-modal.modal.hide.fade(role="dialog" aria-hidden="true" data-backdrop="true")
  .modal-body

控制器：

  def remote_image
    @image = current_user.profile.background_images.find(params[:image_id])
    respond_to do |format|
      format.html {
        render :partial => "remote_image", :locals => { :image => @image }
      }
    end
  end

Answer 1

该插件实际上并没有加载错误的数据，它只加载第一个调用。为什么？

因为远程加载仅在插件的构造函数中完成：constructor source on github

每个模态只有一次调用构造函数（正常行为）：singleton source on github

恕我直言，远程选项更像是一个额外的，非必要的，与...甚至不相关的模态插件选项。它虽然非常有用。

使用非常少的代码以及我们想要的远程加载来重现相同的行为非常容易：Demo (jsfiddle)

<a data-toggle="modal" data-load-remote="/some.url" data-remote-target="#myModal .modal-body" href="#myModal" class="btn">Btn 1</a>

$('[data-load-remote]').on('click',function(e) {
    e.preventDefault();
    var $this = $(this);
    var remote = $this.data('load-remote');
    if(remote) {
        $($this.data('remote-target')).load(remote);
    }
});

Twitter引导模式加载错误的远程数据

1 个答案: