4

Rails アプリケーションで Masonry を使用して、画像でいっぱいの画面をレンダリングしています。私の問題は、ある時点でリモート AJAX フォームを使用して呼び出しを行い、後で div を更新することです。その時点以降、Masonry の呼び出しは機能しなくなり、Masonry が定義されていないかのように動作します。

レンダリング用のコードはかなり平凡で、Masonry の div が機能するはずです。

<div id="pins">
  <%= render @pins %>
</div>

私がレンダリングしている部分は、次のようなRailsモデルを示しているだけです:

<div id="pin-<%= pin.id %>" class="box">...</div>

最初のページの読み込みで Masonry を読み込むコード:

jQuery ->
    $('#pins').imagesLoaded ->
        $('#pins').masonry itemSelector: ".box", isAnimated: true

次に、ビュー Javascript で、次のように div を再レンダリングします。

$("#pins").html("<%= escape_javascript render @pins %>");

$('#pins').imagesLoaded(function() {
    alert("Hey");
    return $('#pins').masonry({
          itemSelector: ".box",
          isAnimated: true
    });
});

更新すると、アラート「Hey」が表示されます。これは、イベントが発生し、問題なくキャッチされたことを意味します。しかし、メーソンリーが呼び出され、コンテンツを再追加しているようですが、注文はしていません。これをテストするために、リンクを使用してMasonryを手動でトリガーしようとしましたが、escape_javascriptが呼び出された後も機能しなくなりました。もちろん、escape_javascript なしでパーシャルをレンダリングしようとすると、何も更新されません。

JavaScript をエスケープせずにパーシャルをレンダリングする方法、または JavaScript がエスケープされた後に Masonry を操作可能にする方法についての指示が必要です。上記のように再宣言すると、同じ環境で他の JQuery コンポーネントが正常に動作することに注意してください。

前もって感謝します。

4

2 に答える 2

0

要素を追加した後、「appended」メソッドを使用してみてください

http://masonry.desandro.com/methods.html#appended

于 2015-09-25T16:29:54.027 に答える