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

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

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

因为远程加载只在插件的构造函数中完成: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);
    }
});