aureliajs conditional parent layout

Question

I am writing my client app in aureliajs. And by default, for a route like this:

/app/access/management

my app gets rendered like this:

For example assume that the header and sidebar gets rendered on app and then a common container in access and finally the main html in management.

Now I have a sub-component of access for example with name list. And in this component I want the page being rendered without any parent container (without parent html tags).

So I think I have some solutions:

1. Making the list in another module for example /app1/access/list which does not render any additional html on app1 and access.

2. Make a condition inside app and access to decide drawing the header and footer and etc.

3. Call a function in list to hide the drawn layout in parents.

But I can't find the best way. For example a way to tell the parent not render something.

What is the best practice or pattern?

Answer 1

Similar to MVC-style master/layout pages, Aurelia allows you to use a "layout" view like an MVC "master template" for a set of views.

The set of views subject to being part of a layout is defined in Aurelia as a set of views referenced by one or more routes in a router configuration. There are two ways to associate a layout with routes. The first is via HTML, the second is via view model code. ...

and

... To specify a layout on the router-view custom element, we use the following attributes:

• layout-view - specifies the file name (with path) of the layout view to use.
• layout-view-model - specifies the moduleId of the view model to use with the layout view.
• layout-model - specifies the model parameter to pass to the layout view model's activate function. ...

and then via route config:

... We can also associate layouts with route configurations using code in our view model. Suppose we like what we've done above, but we have a couple views that we would like to associate with a different layout and would thus like to partially override the configuration given in the HTML. The following code is an example of how we can do that: ...

I suggest you read this article carefully: aurelia router configuration --> Layouts

Answer 2

You can use a condition if access component ViewModel to check if route was /app/access/list, then component load with container less property.