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?