Aurelia組件未加載視圖模型

Question

我目前正在嘗試學習Aurelia我已經設法使用aurelia-cli設置基本應用程序，並且現在正在嘗試構建自定義組件。我有奧裏利亞的印象，我就可以建立這樣的結構：

> /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) 

在app.js我設法讓我的組件使用<require>標籤在視圖中加載：

<require from = "./components/my-component/my-component.html"></require> 

，然後補充說，標籤將視圖：

<my-component /> 

這個工程完全按照我的預期，但該組件似乎被忽略了視圖模型。

目前我的組件視圖看起來是這樣的：

<template> 
    <h1>${header}</h1> 
    <span>Non-dynamic data for testing</span> 
</template> 

和它的視圖模型看起來是這樣的：

export class MyComponent { 
    constructor() { 
    this.header = 'Service started!'; 
    } 
} 

當我跑我的應用我看到的是與非的跨度動態數據英寸控制檯的HTML輸出如下所示：

<my-component class="au-target" au-target-id="3"> 
    <h1></h1> 
    <span>Non-dynamic data for testing</span> 
</my-component> 

有人可以請te我會在哪裏出錯？

Answer 1

通過將：

<require from = "./components/my-component/my-component.html"></require> 

你只需要HTML模板。將此行更改爲：

<require from = "./components/my-component/my-component"></require> 

而且它應該可以正常工作。

此外，CLI還內置了生成器：運行au generate element以自動創建一個您可以輕鬆修改的模板。