5

Railsでajaxリクエストを介してコンテナに新しいアイテムを追加しようとしています（説明付きのjsfiddleは以下に記載されています）

私が書いた私のjs応答は

var $newthumbs = "..new items..";
$('#homepage_thumbnails').append( $newthumbs );
$('#homepage_thumbnails').isotope( 'appended', $newthumbs );

新しいアイテムが追加されると、ある種の問題が発生するようです..アイテムが追加されると、同位体が発火しないように見え、最初に同位体化されたアイテムと同位体化されていない新しいアイテムが残ります.

これは私が持っているものの例です（いくつかの同位体アイテムを取得し、その後すぐにいくつかの新しい非同位体アイテムを取得しました）

<div id="homepage_thumbnails" class="thumbnails isotope" style="position: relative; overflow: hidden; height: 720px;">
<div class="thumbnail-item isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 480px, 0px);">
...
</div>
<div class="thumbnail-item thumbnail span2">
    ...
</div>
</div>

$('#homepage_thumbnails').isotope( 'insert', $newthumbs );同様に起こることに注意してください

ここで何が起こっているのですか？

アップデート

どうやら同位体が動かなくなったようです.. alert('test') をその後に置くと、発火しません。同位体コールの前にアラートを設定すると、アラートが発生します...ああ、助けて

更新 2

問題を示すjsfiddleを作成しました。非常に単純ですが、問題も単純だと思います。重要なことを見逃しているだけです。

jsfiddle の説明と、それが私の元の問題にどのように関連しているか:

jsfiddle には 2 つのクラスがitemありred-itemます。背景が透明な 3 つのアイテムの単純なレイアウト (問題をわかりやすくするため)。clickmeクリックしたらnew-item、追加を介してグループに参加し、同位体で再結合する必要があります。見られる結果は、red-itemが最初のものより低く、item同位体にならないことです。検査を介して、元のアイテムが同位体になるという私の元の問題と同じであることがわかりますが、新しく追加されたアイテムはそうではありません。

私がそれを明確にし、誰かが私を助けて、私が正気であることを証明できることを願っています. ありがとうございました。

アップデート 3

解決策（部分的）は、 newthumbs を $() のように巻き込むことです

var $newthumbs = $("..new items..");

しかし、私はまだこれに問題があります..

このjsfiddleにソリューションを追加しましたが、毎回2つのdivが追加されます。

この壊れたフィドルでは、\n \t などを追加して、レンダー ヘルパーが Rails で行う方法と同様の div を追加しました。これはうまくいかないようです。

私はそれを機能させる方法を理解しようとしています..

4

3 に答える 3

8

私はあなたと同じ問題を抱えていて、あなたのフィドルを使って解決策を見つけました。問題は、新しいアイテムを追加した後、同位体にそれらの挿入されたアイテムへの参照を与える必要があることだと思います。

http://jsfiddle.net/cR7WP/

あなたが言う時：

element.append( '<div />' ).isotope( 'appended', $('<div />') )

2 つの別個の div 要素が作成されます。1 つは実際に追加され、もう 1 つはアイソトープがレイアウトしようとするフラグメントです。追加された div がレイアウト関数に渡されることはありません。

于 2013-09-25T15:47:40.137 に答える
1

これは私のために働いた

$container = $('#browsecontainer');

$isotope = $container.isotope({
    getSortData: {
      },
      alphabetical: function( $elem ) {
        var name = $elem.find('.name'),
            itemText = name.length ? name : $elem;
        return itemText.text();
      }
    }
  });  


    //// to append items
    var isotopeData = $container.data('isotope');
    for(var item in items)
    {
            $newItem = $(items[item]);
            $container.append( $newItem ).isotope( 'appended', $newItem );
    }

///再レイアウトへ

  $container.isotope( options ,function(){

        //u can remove some items if u want
  });

項目は div の束です

ここでは複数のアイテムを追加しているので、ループで取得しています。 $container はオブジェクトの参照です

于 2012-12-23T13:20:24.600 に答える