Aurelia组件未加载视图模型

Question

我正在尝试学习Aurelia我已经设法使用aurelia-cli来设置一个基本的应用程序,我现在正在尝试构建一个自定义组件.我有Aurelia的印象,我可以设置这样的结构:

> /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)

在app.js中,我设法使用<require>视图中的标记加载我的组件:

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

然后将该标记添加到视图中:

<my-component />

这完全符合我的预期,但该组件似乎忽略了视图模型.

目前我的组件视图如下所示:

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

它的视图模型看起来像这样:

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

当我运行我的应用程序时,我看到的是带有非动态数据的跨度.控制台的HTML输出如下所示:

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

有人可以告诉我哪里出错了吗？

Answer 1

通过:

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

您只需要HTML模板.将此行更改为:

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

它应该工作正常.

此外,CLI具有内置生成器:运行au generate element以自动创建可以轻松修改的模板.