Aurelia component not loading view-model

Question

I'm currently trying to learn Aurelia I've managed to use the aurelia-cli to set up a basic app and I'm now trying to build a custom component. I had the impression of Aurelia that I could set up a structure like this:

> /app_folder
> -- /src
> ---- app.html (root component view)
> ---- app.js (root component view-model)
> ---- /components
> ------ /my-component
> -------- my-component.html (custom component view)
> -------- my-component.js (custom component view-model)

In app.js I have managed to get my component to load using the <require> tag in the view:

<require from = "./components/my-component/my-component.html"></require>

and then added that tag to the view:

<my-component />

This works exactly as I expected, however that component seems to be ignoring the view-model.

Currently my component view looks like this:

<template>
  <h1>${header}</h1>
  <span>Non-dynamic data for testing</span>
</template>

and it's view-model looks like this:

export class MyComponent {
  constructor() {
    this.header = 'Service started!';
  }
}

When I run my app all I see is the span with the non-dynamic data in. The HTML output from the console looks like this:

<my-component class="au-target" au-target-id="3">
  <h1></h1>
  <span>Non-dynamic data for testing</span>
</my-component>

Can someone please tell me where I'm going wrong?

Answer 1

By putting:

<require from = "./components/my-component/my-component.html"></require>

You are only requiring the HTML template. Change this line to:

<require from = "./components/my-component/my-component"></require>

And it should work fine.

Also, the CLI has built-in generators: run au generate element to automatically create a template that you can easily modify.