Aurelia component does not load overview model

Question

I am currently trying to learn Aurelia. I managed to use aurelia-cli to configure the base application, and now I'm trying to create a custom component. I had the impression of Aurelia that I could create such a structure:

> /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 was able to load my component using the <require> in the view:

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

and then added this tag to the view:

 <my-component /> 

This works exactly as I expected, however this component seems to ignore the view model.

Currently, my component view is as follows:

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

and the view model is as follows:

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

When I run my application, all I see is a range with non-dynamic data. The HTML output from the console is as follows:

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

Can someone tell me where I'm wrong?

Answer 1

Assuming:

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

You only need an HTML template. Change this line to:

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

And it should work fine.

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