Twitter引导模式加载错误的远程数据 [英] Twitter bootstrap modal loads wrong remote data

问题描述

我正在使用Twitter Bootstrap模态功能，并从远程位置加载数据.我为一组缩略图提供了远程URL，希望一旦单击缩略图，就会显示适当的数据(图像的大版本).我正在使用html声明式样式来定义远程url和模式的所有功能.

I'm using Twitter Bootstrap modal featurs and loading data from remote locations. I'm providing the remote url for a set of thumbnails with the hope that once the thumbnail is clicked, the appropriate data (a large version of the image) is displayed. I'm using the html declarative style to define the remote urls and all the features of the modal.

我发现Twitter引导模式首先加载第一个远程URL，然后不显示后续的远程数据(尽管在Chrome中请求了正确的URL)，但始终显示第一个加载的数据.如何获取它以显示正确的数据?

What I find is that Twitter bootstrap modal loads first remote url then does not display subsequent remote data, (although a request to the proper url is made in Chrome) but displays first loaded data always. How do I get it to show the proper data?

查看:

#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

推荐答案

该插件实际上不会加载错误的数据，而只会加载第一个调用.为什么?

The plugin doesn't actually load the wrong data, it only loads the first call. Why ?

因为远程加载仅在插件的构造函数中完成: github上的构造器源代码

Because the remote loading is only done in the constructor of the plugin : constructor source on github

每个模态只有一个调用构造函数(以其正常行为):

And there is only one call to the constructor per modal (in its normal behavior) : singleton source on github

恕我直言，远程选项更像是一个额外的完全不重要，与模态插件不相关的选项.不过，它可能非常有用.

IMHO, the remote option is more like an extra, non-essential-at-all, not-even-related-to-the-modal-plugin option. It can be very useful though.

并且只需很少的代码和所需的远程加载就可以很容易地重现相同的行为:演示(jsfiddle)

And it's very easy to reproduce the same behavior with very little code, and as much remote loading as we want : 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引导模式加载错误的远程数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！