Aurelia verschachtelte Router und Router-Ansichten

Ich möchte eine Liste von Kursen auf dem Bildschirm haben (konstruiertes Beispiel). Wenn Sie auf einen Kurs klicken, wird er in eine Liste von Kursteilnehmern, die den Kurs belegen, erweitert (wobei weiterhin die Liste der Kurse angezeigt wird). Wenn ich auf einen Schüler klicke, muss er in eine Ansicht der Schülerdetails (mit der Liste der Schüler UND der Liste der Kurse) erweitert werden. usw.Aurelia verschachtelte Router und Router-Ansichten

Also im Grunde möchte ich verschachtelte Router haben, denke ich?

Beispiel, app.js

config.map([ 
     {route: "", moduleId: 'no-selection', title: 'Select'}, 
     {route: "course/:course-id", moduleId: 'course', name: 'course'} 
]);

course.js (der Router injizieren):

this.router.configure(config => { 
     config.map([ 
      {route: "course/:course-id/student/:student-id", name: "student", moduleId: "student"} 
     ]); 
})

student.html hat seinen eigenen Router-View-Element

Die oben genannten Arbeiten, ABER wenn ich auf einen Link der obersten Ebene (einen Kurs) klicke, wird der Inhalt in die innere Router-Ansicht eingefügt. Schlimmer noch, es gibt jetzt eine Router-Ansicht in jedem Schüler, die erweitert wird, wie kann ich das schaffen?

Grundsätzlich kann ich keine Dokumentation finden, wie dies zu tun ist - das Kind Router-Zeug scheint nicht genau das zu sein, was ich brauche? Jede Hilfe wird geschätzt.

Quelle

2017-02-06 DaafVader

Ich denke, Sie haben die Aufgabe ein wenig zu kompliziert gemacht. Ist das wirklich etwas, das Sie unbedingt Router brauchen? Von dem, was ich verstehe, sollten Sie eher regelmäßige Ansichten haben. – Travo

Ich möchte Geschichte auf der Navigation und auch in der Lage sein, schnell auf einen anderen Kurs/Schüler etc. zu wechseln. Wenn Sie eine andere Möglichkeit vorschlagen können, um das zu erreichen ... Ich bin sehr neu in Aurelia - könnte etwas offensichtlich fehlen – DaafVader

Sie don Um dies zu erreichen, brauchen Sie keine verschachtelten Router. Ein Single-Level-Router kann es ziemlich einfach mit ein paar Komponenten handhaben. Es würde eine Weile dauern, das zu erklären, und ist honorarisch über den Rahmen einer einzelnen Stack Overflow-Frage hinaus. Ich würde sehr empfehlen, Rob Eisenbergs Intermediate Aurelia-Kurs auf Vimeo zu besuchen. Es baut mehr oder weniger genau das, was Sie wollen. https://vimeo.com/ondemand/intermediateaurelia/ –

Schauen wir uns das an und wie wir das mit einem einzigen Router implementieren können. Hier ist die Routenstruktur, die ich verwenden könnte.

[ 
    { route: "", moduleId: 'no-selection', title: 'Select'}, 
    { route: "course/:courseId/:studentId?", moduleId: 'course', name: 'course'} 
]);

Der studentId Parameter ist optional.

Dann würde ich sehen, wie Sie diese Kurs-Seite verwenden, um alles zu tun, was Sie nur basierend auf den Parametern im activate Callback erhalten möchten.

Ich habe momentan keine Zeit, eine vollständige Antwort zu geben, aber hoffentlich hilft dir das den richtigen Weg!

Quelle

2017-02-06 17:15:40

Danke, ich sehe, wohin du damit gehst. Es fühlt sich ein bisschen wie ein Hack an. Ich dachte, es wäre einfach mit Routern zu tun, aber es scheint, Router in Aurelia sind ziemlich einfach. – DaafVader

Nicht sicher, was das zu einem Hack macht. Es ist eine einfache Lösung, die keine unnötig komplizierte Architektur erzeugt. Ich hätte Ihnen zeigen können, wie Sie das mit Ihrem Design machen können, aber ich habe versucht, Ihnen zu helfen, einen anderen Weg zu finden, über das Problem nachzudenken. Eine andere Option ist die Verwendung eines optionalen Parameters anstelle von zwei separaten Parametern. –

In der Tat werde ich meine Antwort aktualisieren, um einen optionalen Parameter zu verwenden. –

Aurelia verschachtelte Router und Router-Ansichten

Antwort

Verwandte Themen