基本的自定义元素似乎没有工作

我想为我的Aurelia应用程序创建一个标准的用户状态小部件，但我不确定我在做什么错误。作为一个起点，我遵循the docs，但是我的结果并不是他们告诉我的期望，我也没有在构建或浏览器中看到错误。基本的自定义元素似乎没有工作

相关文件如下：

<!-- nav-bar.html --> 
<template bindable='router'> 
    <require from="./user-status "></require> 
    <!-- various nav buttons --> 
    <p class="navbar-collapse collapse navbar-text"> 
     Test <user-status></user-status> 
     </p>

用户status.html

<template> 
    ${status} 
</template>

用户status.js

export default class UserStatusCustomElement { 
     constructor() { 
     this.status = 'Be sure to drink your Ovaltine!'; 
     } 
    }

如果我改变nav-bar.html的要求看对于./user-status.html它似乎有效果（额外aurelia-看起来属性是广告ded到呈现的html中的用户状态元素），但不呈现消息（假定b/c不是拾取类并呈现为仅html的东西）。如果我按原样离开，它不会出错，但这些属性不会被添加，也不会显示任何内容，甚至是静态文本。

来源

2017-02-18 Paul

是否有可能由于'from =“./ user-status”'中的额外空间而发生问题？也许尝试将它改为'from =“./ user-status”'？这看起来可能是一个非常愚蠢的建议，但是由于'repeat-for'迭代器中的空间，我面临了一些问题。 –

另一个建议是，如果你只想使用html，那么使'status''bindable'（就像''nav-bar'为'router'完成的那样），并且绑定来自'nav-bar'的属性。 –

从'user-status.js'中删除'default'关键字。 –

我玩过你的代码，发现从user-status.js模块中删除default修复了这个问题。我怀疑原因与Aurelia在导入模块时如何利用模块加载器（System.js，webpack，...）有关。不幸的是，我对奥里利亚的内部知识不够深入，没有给出更深入的答案。

来源

2017-02-18 18:36:46

谢谢，我实际上读了一些关于导入/导出的东西，我认为这更正确的说它是关于Aurelia如何导入视图模型（独立于模块加载器）。他们希望支持导入没有默认导出的文件，因此他们必须导入所有内容，然后假定导出的第一个内容是视图模型。从我可以告诉，做这不符合默认的导出/默认导入语法。也就是说，如果有人比我更聪明，我会提出一个错误来解决这个问题。 :) – Paul

基本的自定义元素似乎没有工作

回答

相关问题