2016-08-27 4 views
0

Ich implementiere eine unendliche Schriftrolle auf Meteor, um ein Raster von Bildern anzuzeigen, die mit einer großen Sammlung verknüpft sind.Meteor infinite scroll: verhindern abonnieren rerender elements

Wenn der Benutzer am Ende der Seite ist, abonniere ich mehr Elemente und ich erhöhe die Anzahl der angezeigten Bilder (über mein 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); 

Es funktioniert gut, aber alle Schablonenelemente sind neu Rendering und es dauert auch einige Zeit, dies zu tun. Es ist sehr unangenehm für den Benutzer, ich denke, es braucht Zeit, weil ich Bilder und nicht Text anzeigen (wir komprimieren die Bilder bereits auf eine minimale Größe).

Das Problem liegt an der subscribe, die alle Vorlage Elemente neu zu rendern.

Wie kann ich nur die neuen Elemente hinzufügen und das erneute Rendern der bereits angezeigten Elemente beim Abonnieren verhindern?

Meine App wird auf mobilen Geräten sein, daher kann ich nicht viele Elemente abonnieren und dann nur das Limit im Template-Helper erhöhen.

+0

Bitte erstellen Sie eine [mcve] – JimHawkins

+0

Einige Code wird wirklich bei der Diagnose des Problems helfen – Ankit

+0

Ich habe ein Beispiel hinzugefügt – Rzqt

Antwort

0

Endlich habe ich es, ich habe etwas Code in der HTML hinzugefügt, um zu warten, dass das Abonnement bereit sein und ich habe es vergessen.

I entfernt:

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

endlose Rolle ist wie ein Zauber funktioniert.