2

我正在使用 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
4

1 回答 1

8

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

因为远程加载只在插件的构造函数中完成：github上的构造函数源码

每个模态只有一个对构造函数的调用（在其正常行为中）：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);
    }
});
于 2012-10-29T18:43:00.613 回答