Javascript Stoppen Sie auf der harten Seite neu zu laden in MeteorJS

Question

Ich habe eine App mit MeteorJS entwickelt. Alles funktioniert gut. Ein kleines Problem, dem ich gegenüberstehe, d. H. Wenn ich die Seite mit dem benutzerdefinierten JavaScript neu lade, höre auf zu arbeiten.

Ich habe Java Script Bibliothek (http://tablesorter.com/docs/) in Anwendung implementiert. Nach dem Neuladen funktioniert die Sortierung nicht mehr, aber wenn ich zu einer anderen Seite navigiere und auf dieselbe Seite zurückkomme, funktioniert es gut.

Hier ist der Code, den ich verwendet habe, um die Sortierung auf Tabellen anzuwenden. .

$(document).ready(function() { 
    $("table").tablesorter(); 
}); 

Ich habe auch versucht, in onRendered Methode von MeteorJS diesen Code hinzufügen

Template.captable.onRendered(function() { 
    $("table").tablesorter(); 
}); 

Wenn ich $ ("table") ausführen tablesorter(); in der Konsole nach dem Hard-Reload-Seite beginnt es zu arbeiten.

Answer 1

Es klingt wie Sie .tablesorter() aufrufen, bevor alle Daten angekommen sind.

Wenn Sie eine Meteor-Seite zum ersten Mal laden (wie bei einem Hard Reload), werden alle Abonnements auf leer zurückgesetzt. Somit sind keine Daten auf dem Client verfügbar.

Dann lädt Ihre App Javascript und startet auszuführen: Sie rufen abonnieren, um Daten abzurufen, und Ihre Vorlage wird sehr bald gerendert, aber vor die Abonnementdaten tatsächlich vom Server angekommen ist.

Ihre Vorlage wird neu gerendert, wenn die Daten eintreffen, aber die onRendered() hat bereits einmal ausgelöst und wird nicht erneut ausgelöst.

Was Sie tun müssen, ist mit dem Anruf .tablesorter() warten, bis Ihr Abonnement .ready() ist. Da onRendered() nicht reaktiv ist, müssen Sie eine Autorun definieren, um dies zu tun. Wenn Sie the recommended pattern for template subscriptions folgen, sieht es wie folgt aus:

Template.captable.onCreated(function() { 
    this.subscribe('captable'); // ...or whatever your publication name is. 
}); 

Template.captable.onRendered(function() { 
    this.autorun(function() { 
     if(Template.instance().subscriptionsReady()) $("table").tablesorter(); 
    }); 
});