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

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.

Answer 2

github上有一个关于同样问题的问题https://github.com/aurelia/templating-router/issues/34它已经解决了，现在layoutViewModel绑定得很好。

Answer 3

You could do this in layout/main.ts:

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