Aureliaコンポーネントがビューモデルをロードしていません

Question

私は現在Aureliaを学習しようとしています。私はaurelia-cliを使って基本的なアプリケーションを設定していますが、今はカスタムコンポーネントを作成しようとしています。私はビューで<require>タグを使用してロードするために私のコンポーネントを取得するために管理しているapp.jsで

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

：

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

私はどこが間違っているの？置くことによって

Answer 1

：あなたが唯一のHTMLテンプレートを必要としている

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

。この行を次のように変更してください。

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

これはうまくいくはずです。

また、CLIには組み込みジェネレータがあります。au generate elementを実行すると、簡単に変更できるテンプレートが自動的に作成されます。