How to use layouts in Aurelia?

Question

Aurelia recently added support for layouts, and they roughly explained those in their documentation.

However, while I managed to get the layouting itself to work, I cannot use any variables in my layout-HTML which I have as properties in my Layout-ViewModel.

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 the exclamation point occurs. Do you have any ideas what I am doing wrong or how I can get it to work?

Many thanks in advance!

Answer 1

There is an issue on github about very same problem https://github.com/aurelia/templating-router/issues/34 It has been resolved and now layoutViewModel binds just fine.

Answer 2

Sorry for the delayed answer here, but your example appears to be working for me. It is highly possible that you experienced a bug that has since been fixed or an issue elsewhere in your code.

Please see this linked Gist.run example to see your example running.