javascript - Aurelia component not loading view-model - Stack Overflow

admin管理员组

文章数量:1327936

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 ponent. I had the impression of Aurelia that I could set up a structure like this:

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

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

<require from = "./ponents/my-ponent/my-ponent.html"></require>

and then added that tag to the view:

<my-ponent />

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

Currently my ponent 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-ponent class="au-target" au-target-id="3">
  <h1></h1>
  <span>Non-dynamic data for testing</span>
</my-ponent>

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

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 ponent. I had the impression of Aurelia that I could set up a structure like this:

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

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

<require from = "./ponents/my-ponent/my-ponent.html"></require>

and then added that tag to the view:

<my-ponent />

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

Currently my ponent 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-ponent class="au-target" au-target-id="3">
  <h1></h1>
  <span>Non-dynamic data for testing</span>
</my-ponent>

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

• javascript
• aurelia

Share Follow asked Dec 15, 2016 at 16:06 Alex FoxleighAlex Foxleigh 1,97422 gold badges2222 silver badges5252 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

By putting:

<require from = "./ponents/my-ponent/my-ponent.html"></require>

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

<require from = "./ponents/my-ponent/my-ponent"></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.

本文标签： javascriptAurelia component not loading viewmodelStack Overflow