CODEWITHSUNDEEP
aurelia
DaafVader
DaafVader

Reputation: 1754

Aurelia nested routers and router-views

I want to have a list of courses on the screen(contrived example). When you click a course, it expands(still showing the list of courses) into a list of students that take the course. When I click a student it must expand into a view of the students details(still showing the list of students AND the list of courses). etc.

So basically I want to have nested routers, I think?

Example, app.js

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

course.js(inject the router):

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

student.html has its own router-view element

The above works, BUT when i click a top level link(a course), the content gets put in the inner router-view. Even worse, there is now a router-view in every student that gets expanded, how do I manage this?

Basically I can't find any documentation on how to do this - the child router stuff doesn't seem to be exactly what I need? Any help will be appreciated.

Upvotes: 1

Views: 513

Answers (1)

Ashley Grant
Ashley Grant

Reputation: 10897

Let's look at this and how we can implement this with a single router. Here is the route structure I might use.

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

The studentId parameter is optional.

Then I would look at how to use this course page to do everything you want based solely on the parameters it receives in the activate callback.

I don't have time to give a full answer right now, but hopefully this will help lead you down the right path!

Upvotes: 1

Related Questions