Wie können Daten zwischen Routen in Aurelia wiederverwendet werden?

Question

Ich habe eine Benutzereinheit in das System und die folgende Route holt sie vom Server und zeigt die Details:

routerConfiguration.map([ 
    // ... 
    {route: 'user/:id', name: 'user-details', moduleId: './user-details'} 
]); 

Jetzt möchte ich für den angezeigten Benutzer bearbeitet Formular anzuzeigen. Ich habe die folgenden Anforderungen:

1. Bearbeitungsformular sollte eine separate URL-Adresse haben, so dass es leicht an andere gesendet werden kann.
2. Wenn Benutzer auf die Schaltfläche Edit auf der Detailseite des Benutzers klickt, sollte das Bearbeitungsformular eine bereits geladene Instanz des Benutzers verwenden (d. H. Es sollte die API nicht erneut für Benutzerdetails kontaktieren).
3. Wenn Benutzer auf die Schaltfläche Edit auf der Detailseite des Benutzers und dann die Zurück Schaltfläche im Browser klickt, sollte er die Detailseite ohne Bearbeitungsformular erneut sehen.

erster Versuch

Ich versuchte, das Bearbeiten-Formular als separate Seite zu definieren:

routerConfiguration.map([ 
    // ... 
    {route: 'user/:id/edit', name: 'user-edit', moduleId: './user-edit'} 
]); 

Dadurch wird die Anforderung # 1 und # 3 passiert, aber es hat den Benutzer wieder laden wenn das Bearbeitungsformular geöffnet ist.

Ich kenne keine Möglichkeit, einige benutzerdefinierte Daten zwischen den Routen zu schmuggeln. Es wäre perfekt, wenn ich die vorgeladene Benutzerinstanz an die Editierroute übergeben könnte und die Editierkomponente sie verwenden würde oder eine neue laden würde, wenn sie nicht gegeben wäre (z.B. greift der Benutzer direkt auf die URL zu). Ich habe nur how to pass strings to the routes in a slighlty hacky way gefunden.

2. Versuch

Ich beschloss, das Bearbeitungsformular in einem modalen angezeigt werden und es wird automatisch angezeigt, wenn es eine ist ?action=edit GET-Parameter. Der Code inspiriert von this und this Frage:

export class UserDetails { 
    // constructor 
    activate(params, routeConfig) { 
    this.user = /* fetch user */; 
    this.editModalVisible = params.action == 'edit'; 
    } 
} 

und wenn der Benutzer die bearbeiten Schaltfläche klickt, wird der folgende Code ausgeführt:

displayEditForm() { 
    this.router.navigateToRoute('user/details', {id: this.user.id, action: 'edit'}); 
    this.editModalVisible = true; 
} 

Dies geht # 1 (die URL bearbeiten ist user/123?action=edit) und # 2 (die Benutzerinstanz wird nur einmal geladen). Wenn Benutzer jedoch auf die Zurück Schaltfläche klicken, ändert sich die URL wie gewünscht von user/123?action=edit zu user/123, aber ich habe keine Ahnung, wie Sie es erkennen und das Bearbeitungsformular ausblenden (die activate Methode wird nicht erneut aufgerufen). Daher erfüllt diese Lösung die Anforderung Nr. 3 nicht.

EDIT:

In der Tat habe ich festgestellt, dass ich die URL Änderung erkennen kann und die Bearbeitungsform mit Ereignis-Aggregator verstecken:

ea.subscribe("router:navigation:success", 
    (event) => this.editModalVisible = event.instruction.queryParams.action == 'edit'); 

Aber dennoch möchte ich wissen, ob es eine ist besserer Weg, dies zu erreichen.

Die Frage ist

Wie mit dieser Situation in einer sauberen und intuitiven Art und Weise zu bewältigen?

Answer 1

Wie wäre es mit dem Hinzufügen einer Benutzerklasse, die als Modell dient und die Abhängigkeitsinjektion verwendet, um sie in Ihren View-Modellen zu verwenden?

export class User { 
    currentUserId = 0; 
    userData = null; 

    retrieve(userId) { 
     if (userId !== this.currentUserId) { 
      retrieve the user data from the server; 
      place it into this.userData; 

     } 

     return this.userData; 
    } 
}