justifiedGallery再読み込み時にブレークする

Question

私のウェブページにjustifiedGalleryが使用されている最初にページにアクセスすると、ギャラリーが正しく表示されます。しかし、私はページをリロードすると、それは壊れるでしょう。

私は流星を使用して反応しています。

旧コードサンプルは：

$(document).ready(() => { 
    $('#gallery').justifiedGallery({ 
    rowHeight: 400, 
    fixedHeight: false, 
    lastRow: 'justify', 
    margins: -3, 
    }); 
}); 

私はjQueryのsetTimeoutを（）関数にそれを入れています。

setTimeout(function(){ 
    $('#gallery').justifiedGallery({ 
    rowHeight: 400, 
    fixedHeight: false, 
    lastRow: 'justify', 
    margins: -3, 
    }); 
}, 100); 

これでうまくいきました。私はちょうどこれがそれを修正する正しい方法であることを知る必要がありますか？これは将来の証明のためです。

Answer 1

DOMをグローバルに操作するコードを決して実行しないでください。あなたが得ているのは、実際のテンプレートレンダリングの競合状態です。これは無作為に動作することもありますが、時にはランダムに動作しない場合もあります。また、アプリのパフォーマンスを阻害するテンプレートエンジンとの衝突が常に発生します。

ギャラリーの作成をTemplate.onRendered()メソッドに移動し、$('#gallery')の代わりにthis.$('.gallery')を使用します。 Reactを使用している場合、同等の場所は、.gallery divを含むプレゼンテーションコンポーネントのcomponentDidMountメソッドです。

---

サイドノート：要素選択、クラスまたはデータ属性の使用にIDを使用しないでください。作成しているコンポーネントは再利用できず、パフォーマンス上の問題がある可能性があるため、IDは悪い習慣です。