Aurelia要求html导入不起作用

Question

我在控制台中没有错误。但控制台没有记录我放入top-nav.js的构造函数的console.log。但更重要的是。简单的jumbotron div不是渲染，Aurelia在控制台中说它找到了正确的top-nav.html。这里是App.html

<template> 
    <require from="bootstrap/css/bootstrap.css"></require> 
    <require from="htmlreq/top-nav"></require> 
    <h1>${message}</h1> 
</template> 

App.js一致性

export class App { 
    message = "Hello Pathways"; 
} 

top-nav.html

<template> 
    <div class="jumbotron"> 
     <div class="container"> 
      <p>Career &amp; Technical Education </p> 
     </div> 
    </div> 
</template> 

top-nav.js控制台语句不点火。 Jumbotron在dom的任何地方都是不可见的。

export class TopNav { 
    _topnav = true; 
    constructor() { 
     console.log('constructed'); 
    } 
} 

Answer 1

你“要求”自定义元素，但你是不是“用”了。

你应该这样做：

<template> 
    <require from="bootstrap/css/bootstrap.css"></require> 
    <require from="htmlreq/top-nav"></require> 
    <h1>${message}</h1> 

    <top-nav></top-nav> 
</template> 

没有必要在这种情况下使用compose。

Answer 2

好的，看起来这是<compose>的情况。它“组成”html，如果你愿意，你仍然可以做一些视图模型视图绑定业务。我需要这个App.html而不是require。需要，我想，更多的是用于创建自定义属性/标签，然后将它们包括在app.html

<template> 
    <require from="bootstrap/css/bootstrap.css"></require> 
    <compose view-model="htmlreq/top-nav" view.bind="htmlreq/top-nav.html"></compose> 
    <h1>${message}</h1> 
</template>