2014-12-29 9 views
6

Ich merke, dass jedes Mal, wenn Meteor/Iron Router Routen ändert, die gesamte Seite aktualisiert wird.Verhindern, dass Meteor/Iron Router beim Ändern von Routen neu geladen wird

Warum passiert das und wie kann ich das verhindern?

So wie ich das Routen-Setup haben so etwas wie dies für jede neue Strecke ist ...

Router.route('/route/:_some_param', { 
    name: 'something', 
    onBeforeAction: function(){ // Something }, 
    waitOn: function(){ // Some subscription }, 
    action: function(){ // Something }, 
}) 

Ich habe auf diese Weise mehrere Routen-Setup. Immer wenn ich von Seite zu Seite gehe, lädt Meteor die gesamte Seite neu. Aber wenn ich auf einer Route bleibe und nur die Params ändere, lädt Meteor nur das, was nötig ist, und das will ich immer.

+0

Haben Sie genau das gleiche Problem ... haben Sie es geschafft, es zu lösen? Das Seltsame ist, dass manchmal ein Klick auf den Anker ein traditionelles Eisen-Router-Verhalten zeigt, während andere Anker das vollständige Neuladen der Seite durchführen. – tomitrescak

+0

@ user1348303 Überprüfen Sie meine Antwort unten. Es kann helfen zu erklären, warum Sie diese Unterschiede zwischen den Routen sehen. –

Antwort

1

Ich glaube, was Sie beobachten, ist die Grundlage für die Funktionsweise von Iron Router. Sie erstellen eine Vorlagevorlage mit einem Vorlagenplatzhalter {{> yield }} und Iron Router tauscht sie für die Vorlage aus, die von der angegebenen Route angegeben wird. Wenn Sie eine andere Route wählen, zeigt die {{> yield }} jetzt auf die neue Vorlage und somit wird dieser Teil der Seite neu gerendert. Sie können den Umfang der auszulagernden Seite minimieren, indem Sie den Umfang Ihrer Vorlage {{> yeild }} in Ihrem Master-Template minimieren.

Zum Beispiel in meiner Vorlage habe ich einen Header und eine Fußzeile wie folgt aus:

<html> 
    {{> header }} 
    {{> yield }} 
    {{> footer }} 
</html> 

Wenn ich die Routen zu navigieren, die Kopf- und Fußzeilen überhaupt nicht aktualisiert werden, sondern nur die „Innereien“ zwischen ihnen.

+1

Nein, ich denke, hier ist ein echtes Problem. Manchmal führt das Ändern von Routen zu einer vollständigen Aktualisierung des Browsers.FWIW, bisher habe ich nur die komplette Browseraktualisierung beim Wechseln zu meiner Route beim Pfad '/' erlebt. – bengreene

+0

Das Neuladen der Seite unterscheidet sich von dem erneuten Rendern der Seite. – patwhite

1

Wie genau wechseln Sie die Seiten? Meteor lädt die gesamte Seite neu, wenn Sie traditionelle Anker-Tags als Anker-Werkzeug verwenden.

Zum Beispiel, wenn Sie zwischen Vorlagen navigieren und sind mit dieser Art von Struktur:

<a href="/pathToTemplate">Let's go to the new template!</a> 

Meteor wird die gesamte Seite neu zu laden, wie Sie tatsächlich einen Anker-Tag mit dem Browser zu sagen, Routen zu ändern. Wenn Sie diese Struktur jedoch verwenden:

<a href="{{pathFor 'yourTemplateName'}}">To the new template ahoy!</a> 

Der Link wird Eisen Router sagen die Vorlage für Sie zu ändern und nur den Code aktualisieren, die Sie haben in Ihrer {{> Ausbeute}} Bereich. Um Ihre Links zu den richtigen Seiten zu leiten, stellen Sie sicher, dass Sie die im Feld name:... aufgelisteten Felder in Ihrem Router in den Abschnitt 'yourTemplateName' des pathFor Helfers einfügen.

Kurz gesagt, der Grund, warum Sie eine vollständige Browseraktualisierung erhalten, liegt wahrscheinlich daran, dass Sie den Browser verwenden, um zwischen den Links zu wechseln, anstatt die integrierten Meteor- und Iron-Router-Helfer zur Berechnung der Logik zu verwenden für den Übergang. Es gibt noch viel mehr, was Sie mit diesem Helfer tun können. Wenn Sie weitere Informationen benötigen, empfehle ich Ihnen, den Pfad- und Link-Vorlagen-Helfer-Abschnitt unter Iron Router's Git page zu lesen.

Wenn Sie nur bestimmte Teile der Seite zum Aktualisieren brauchen und der Rest gleich bleibt, dann würde ich auf die Antwort von CodeChimp verweisen, da es sich um Sound handelt. Wenn Sie verschiedene Layout-Vorlagen für verschiedene Dinge benötigen, hilft Ihnen die Layouts-Sektion dabei, mit Ihrem Code nett zu werden und vielleicht sogar ein Grinsen zu knacken, wie nur Action-Helden unbeirrt von einem explodierenden Gebäude weggehen.


Eine andere Situation, die Sie finden können, wenn Sie einen Link verwenden müssen, um eine Aktion auszuführen, aber Sie wollen nicht den Browser, um das Ereignis kapern und die Seite neu rendern. In diesem Fall würden Sie Ihren HTML-Code wie gewohnt einrichten und dann dieses Element, das das click -Ereignis erhält, entweder anhand seiner ID, Klasse oder des TAG-Namens und mithilfe der folgenden Codestruktur in der JavaScript-Datei, die Ihrer Vorlage entspricht, ausrichten. Dies ist nützlich für die Übermittlung von Formularen, die eine Meteor-Methode auslösen, die etwas auf dem Server ausführt, und dann die erforderlichen Daten zurückgibt (normalerweise zu einer Umleitungsfunktion) und so weiter und so fort.

Also, wenn Sie auf der Vorlage sind crazyStuffIsAboutToHappen und Sie wollten ein Meteor Methode doCrazyStuff genannt rufen, wenn Sie auf einen Link klicken, der eine ID von #triggerCrazyStuff hat und dann haben Meteor Ihre Benutzer auf die theHouseThatCrazyStuffBuilt Vorlage umleiten, würden Sie die verwenden folgende Struktur.

Template.crazyStuffIsAboutToHappen.events(
    'click #triggerCrazyStuff': (e) -> 
    e.preventDefault() # to stop the browser from hijacking the event 

    # -- error handling and pre-submit validation and yadda yadda --   

    Meteor.call('doCrazyStuff', --arguments--, (error, result) -> 
     if error 
     # handle the error + short-circuit the function. 
     return throwError(error.reason) 

     Router.go('theHouseThatCrazyBuilt, {--args--}) 
) 

Und ja, der Template.TEMPLATE_NAME.events Bereich ist auch sehr praktisch für alle anderen JS Ereignisse gibt wie MouseEnter- und so weiter und so fort.

Happy Coding!

0

Nein sicher, ob dies anderen Menschen helfen, aber ich war auf der Suche und auf diese Suche nach einer Antwort und dachte, es schließlich aus - im Grunde war jedes Mal geklickt ich einen bestimmten Link Eisen Router hartes Auffrischen (hartes Nachladen, rundes Stolpern auf den Server) die ganze Seite.

Es stellt sich heraus, ich hatte Fett gefingert die href, und es war Runde stolpern auf den Server, um nach der Route dort zu suchen (ich nehme an, das ist, wie Iron Router serverseitige Routen behandelt).

Grundsätzlich hatte ich Routen wie:

/item 
/items/:id 

und ich hatte einen Link zu zeigen

/item/1234 

Wenn ich das

korrigiert
/items/1234 

alles wie erwartet funktioniert.

Verwandte Themen