javascript - Aurelia:自定义元素未按预期呈现输出。浏览器不加载js文件。

Question

我正在尝试使用 aurelia 设计自定义元素，但我一遍又一遍地遇到同样的问题:浏览器加载组件的 html 文件，但不加载其兄弟 js 文件。我正在使用 es2016 入门套件 1.0.0-beta.1.2.0、jspm 0.16.15 和 npm 2.11.2

具体来说，考虑一个(非常)简单的例子。该组件(如预期)称为 test，其 html 和 js 文件分别如下:

测试.html:

<template>
<div>Name: ${name}</div>`
</template>`

测试.js

import {bindable} from 'aurelia-framework';
export class Test {
@bindable name = "";
}

从文件 app.html 调用该组件，并在 app.js 中设置属性名称的值，如下所示:

app.html:

<template>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="./test.html"></require>

<div class="page-host">
      <test name.bind="name"></test>
</div>
</template>

app.js:

export class Welcome {
   name = 'My Test';
}

本地服务器运行后，输出很简单:

姓名:

预期输出为:名称:我的测试。

我注意到的:1)如果我转到谷歌浏览器开发工具的源文件夹 dist，我会看到加载了以下文件:app.html； app.js 和 test.html。也就是说，test.js 根本不会出现在那里。2)如果编写test.html如下:

 <template bindable="name">
 <div>Name: ${name}</div>
 </template>

我有预期的输出:名称:我的测试

我应该错过一些非常愚蠢的东西，我无法弄清楚。关于可能发生的事情有任何提示吗？发送

Answer 1

当您在导入末尾附加 .html 时，您告诉加载器仅加载 html 文件 -

<require from="./test.html"></require>

你需要像这样删除它 -

<require from="./test"></require>