How to use layouts in Aurelia?

Question

Aurelia recently added layout support, and they roughly explained these in their documentation .

However, although I managed to get the layout itself to work, I cannot use any variables in my HTML layout that I have as properties in my layout.

A MWE:

app.ts

import {Router, RouterConfiguration} from 'aurelia-router'; export class App { router: Router; configureRouter(config: RouterConfiguration, router: Router) { config.map([ { route: 'hello', layoutViewModel: 'layout/main', moduleId: 'hello/index' }, ]); } } 

Layout / main.ts

 export class MainLayout { heading = 'Hallo Welt'; } 

layout /main.html

 <template> <h1>${heading}!</h1> </template 

But only an exclamation mark appears. Do you have any idea what I'm doing wrong or how can I make it work?

Thank you very much in advance!

Answer 1

Sorry for the postponed answer here, but your example seems to work for me. It is possible that you have encountered an error that has since been fixed or a problem elsewhere in your code.

Please see this related Gist.run example to see how your example works.

Answer 2

There is a problem with github on the same problem https://github.com/aurelia/templating-router/issues/34 It was resolved, and now the layoutViewModel binds just fine.

Answer 3

I think you are missing this one. in layout / main.ts:

 export class MainLayout { this.heading = 'Hallo Welt'; }