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以自动创建您可以轻松修改的模板。

Aurelia组件未加载视图模型

1 个答案: