Aktuelle Seite neu laden in Aurelia

Question

Ich habe eine Aurelia Anwendung, wo der Benutzer die Firma auswählen kann, die sie gerade "arbeiten". Jede Seite in der App ist abhängig von der aktuell ausgewählten Firma und der Benutzer kann aus einem Dropdown-Menü eine neue Firma auswählen. Das Drop-Down-Menü ist eine Komponente, die auf der Navigationsleiste angezeigt wird.

Was ich möchte ist, dass diese Komponente die aktuelle Seite auf dem Handler change.delegate neu laden, ohne die App neu zu starten. Die Einstellung window.location.href steht also nicht zur Verfügung.

Gibt es eine Möglichkeit, die Aurelia Router zu zwingen, die aktuelle Route/Seite neu zu laden?

Die Alternative wäre, die EventAggregator zu verwenden, um eine Gesellschaft verändern sich über die App, um zu signalisieren, aber das würde erfordern entweder auf jeder Seite dieses Ereignis abonnieren oder jede Seite erben von einer Basisklasse, die zu diesem Ereignis abonniert haben, aber Dies sind viel mehr Optionen.

Answer 1

Dieser antwortet nicht Ihre genaue Frage, welche ist wie ein erneuten Laden der aktuellen Ansicht, zu zwingen, aber haben Sie als die aktuelle Unternehmenskennung Ihre Route hinzugefügt (s)? Dies wird Ihr Problem lösen und Ihre Routen mit einem Lesezeichen versehen: zB /#/company1/view1 und /#/company2/view1. Wenn Sie das Unternehmen in der Dropdown-Liste ändern, rufen Sie router.navigate() mit der neuen Route auf und die neue Ansicht wird geladen/aktualisiert.

Um Ihre genaue Frage zu beantworten, habe ich die router.navigate Optionen getestet: router.navigate('myroute', {replace:true, trigger:true}) und keine von ihnen erzwingen ein erneutes Laden der Ansicht, wenn die richtige Ansicht bereits geladen ist. Wenn Sie an Ihren Routennamen ?ramdomNumber anhängen, können Sie eine Reaktivierung der Ansicht erzwingen.

Answer 2

Hier ist eine einfache Lösung ist es, die Seite zu aktualisieren: in aurelia-history-browser.js, fügte einen Scheck in updateHash() und wenn die neue _href ist gleich die alten dann laden Sie die Seite aus dem Cache (nicht der Server).

Dann aktualisieren, um die Seite, die Sie gerade benötigen, um die vorhandenen Optionen zu verwenden:

router.navigateToRoute('watch', {}, { replace: true, trigger: true }); 

Der aktualisierte Code kopiert unten:

function updateHash(location, fragment, replace) { 
    if (replace) { 
     var _href = location.href.replace(/(javascript:|#).*$/, '') + '#' + fragment; 
     if (_href == location.href) 
     location.reload(false); 
     else 
     location.replace(_href); 
    } else { 
     location.hash = '#' + fragment; 
    } 
    } 

Answer 3

Während offiziell nicht unterstützt, gibt es eine Vielzahl von Hacks Vorschläge in a relevant GitHub issue fragen nach dieser Funktionalität.

Der, den ich zur Arbeit kam, die nicht Aureliens Quellcode noch Hinzufügen flüssige Daten auf die Route beinhalten nicht aktualisieren, ist die activationStrategy auf alle meine Routen zu setzen invokeLifecycle anstelle des Standard zu sein, etwa so:

export class App { 

    configureRouter(config, router) { 
    config.map([ 
     { 
     route: ['', 'home'], 
     name: 'home', 
     moduleId: 'home/index', 
     activationStrategy: activationStrategy.invokeLifecycle 
     }, 
     { 
     route: 'users', 
     name: 'users', 
     moduleId: 'users/index', 
     nav: true, 
     activationStrategy: activationStrategy.invokeLifecycle 
     }, 
     ... etc ... 
    ]); 
    } 

} 

Dadurch wird die Methode activate() der Route so ausgeführt, wie Sie es erwarten, wenn das Ansichtsmodell erneut geladen wird. Dann wird in dem Code, der das Nachladen einleitet, muß ich folgende:

this.router.navigateToRoute(
    this.router.currentInstruction.config.name, 
    this.router.currentInstruction.params, 
    { replace: true } 
);