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 のコンストラクター ソース

そして、モーダルごとにコンストラクターへの呼び出しは1つだけです（通常の動作で）：githubのシングルトンソース

IMHO、リモートオプションは、追加の、本質的ではない、モーダルプラグインオプションとは関係のないオプションのようなものです。ただし、非常に便利です。

そして、非常に少ないコードで同じ動作を再現するのは非常に簡単で、必要なだけリモート読み込みを行います:デモ (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 に答える