大きなコレクションにリンクされた画像のグリッドを表示するために、Meteorで無限のスクロールを実装しています。Meteor無限スクロール:再レンダリング要素の予約を防止する
ユーザーがページの最後にいる場合、私はより多くの要素を購読し、表示される画像の数を増やします(template.helperを使用して)。
//SERVER
Meteor.publish('generalMusics', function(limit){
return Musics.find({}, {limit: limit});
});
//CLIENT: when the template is created and when the limit of data increases
//it subscribes again
Template.t_elementSubHeader.onCreated(function() {
Session.set('reqLimit',50);
var self = this;
//Everytime reqLimit changes I redo the subscribe
this.autorun(function(){
self.subscribe('generalMusics', Session.get('reqLimit'));
});
//CLIENT: more elements are sent to the template when reqLimit increases
Template.t_elementSubHeader.helpers({
data: function() {
return Musics.find({}, {limit : Session.get('reqLimit')});
}
});
//Also on client, when the user reach the bottom of the page
Session.set('reqLimit',Session.get('reqLimit')+50);
これはうまくいきますが、すべてのテンプレート要素が再レンダリングされており、その処理には多少時間がかかります。ユーザーにとっては非常に不便ですが、テキストではなく写真を表示しているので時間がかかると思います(私たちはすでに画像を最小サイズに圧縮しています)。
問題は、すべてのテンプレート要素を再レンダリングするサブスクライブによるものです。
新しい要素を追加し、購読時にすでに表示されている要素の再レンダリングを防止するにはどうすればよいですか?
私のアプリはモバイルデバイス上にあるので、たくさんの要素を購読することはできず、テンプレートヘルパーの制限を増やすだけです。
[mcve] – JimHawkins
を作成してください。問題の診断に役立つコードがあります。 – Ankit
例を追加しました – Rzqt