2016-08-27 8 views
0

大きなコレクションにリンクされた画像のグリッドを表示するために、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); 

これはうまくいきますが、すべてのテンプレート要素が再レンダリングされており、その処理には多少時間がかかります。ユーザーにとっては非常に不便ですが、テキストではなく写真を表示しているので時間がかかると思います(私たちはすでに画像を最小サイズに圧縮しています)。

問題は、すべてのテンプレート要素を再レンダリングするサブスクライブによるものです。

新しい要素を追加し、購読時にすでに表示されている要素の再レンダリングを防止するにはどうすればよいですか?

私のアプリはモバイルデバイス上にあるので、たくさんの要素を購読することはできず、テンプレートヘルパーの制限を増やすだけです。

+0

[mcve] – JimHawkins

+0

を作成してください。問題の診断に役立つコードがあります。 – Ankit

+0

例を追加しました – Rzqt

答えて

0

最後に、私はhtmlでいくつかのコードを追加して、サブスクリプションの準備が整うのを待って、それを忘れてしまった。

私は削除:

{{#if Template.subscriptionsReady}} 
     {{> Template.dynamic template="t_elementList" data=tabData}} 
{{/if}} 

無限スクロールは魅力のように働いています。

関連する問題