Szworny Dziąch Szworny Dziąch - 4 months ago 171
HTML Question

Two different layouts in aurelia app

I'd like to use two separate layouts for my aurelia app. Difference between them is that one doesn't have a sidebar. Currently I'm using one layout file defined as below:

<template>
<div class="container">
<router-view></router-view>
</div>
</template>


If an active route needs this sidebar to appear I'm just putting it into its view.
What I'd like to achieve is to add another layout that would have this sidebar by default:

<template>
<require from="../common/elements/sidemenu/sidemenu"></require>

<div class="container">
<sidemenu></sidemenu>
<router-view></router-view>
</div>
</template>


So the question is - how to do this? Is it even possible with an aurelia app to have multiple layouts (or master pages, however you call those)?

Answer

Use aurelia.setRoot()

You can manually set up your application by specifying a script with configure instructions in your index.html. Typically, this is set to main.

index.html

<body aurelia-app="main">

In this script you can specify a root view model using aurelia.setRoot('root'). If no argument is provided, the convention is to use 'app'.

main.js

aurelia.start().then(() => aurelia.setRoot());

However, you can inject the aurelia object anywhere in your application, and call the setRoot function at any time to load a different root view model.

home.js

@inject(aurelia)
export class HomeViewModel {
    constructor(aurelia) {
        this.aurelia = aurelia;
    }
    doStuff() {
        this.aurelia.setRoot('withSidebar');
    }
}

One common use case for this is having a login page, and I've created a complete template for this use case that you can review, clone, or fork here: http://davismj.me/portfolio/sentry/

Comments