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!

Worse

Could you provide a plunker? – Sixtynine

Your moduleId is hello/index aren't you supposed to be doing the assigning in hello/index and not layout/main ? – Corner

@MrBones but I want to provide a ViewModel to my layout, not to the hello/index module – Spraggins

Can you set up a plunkr code or something to work with ? Try changing moduleId to layoutModel. Might be what you are looking for. – Corner

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.

Lacerta

Thanks for updating me on this! Unfortunately, I haven't been working with Aurelia for a while, and I lost track of this question, so sorry for my delayed response. – Spraggins

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.

Onega

Answer 3

You could do this in layout/main.ts:

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

Ment

Actually, this is what my TypeScript code would compile to. – Spraggins