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>