[英]Aurelia component not loading view-model
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. 我正在尝试学习Aurelia我已经设法使用aurelia-cli来设置一个基本的应用程序,我现在正在尝试构建一个自定义组件。 I had the impression of Aurelia that I could set up a structure like this:
我有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)
In app.js I have managed to get my component to load using the <require>
tag in the view: 在app.js中,我设法使用视图中的
<require>
标记加载我的组件:
<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: 当我运行我的应用程序时,我看到的是带有非动态数据的跨度。控制台的HTML输出如下所示:
<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? 有人可以告诉我哪里出错了吗?
By putting: 通过:
<require from = "./components/my-component/my-component.html"></require>
You are only requiring the HTML template. 您只需要HTML模板。 Change this line to:
将此行更改为:
<require from = "./components/my-component/my-component"></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. 此外,CLI具有内置生成器:运行
au generate element
以自动创建可以轻松修改的模板。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.