Aurelia-コンポーネント
コンポーネントは、Aureliaフレームワークの主要な構成要素です。この章では、単純なコンポーネントを作成する方法を学習します。
シンプルなコンポーネント
前の章ですでに説明したように、各コンポーネントには view-model で書かれています JavaScript、および view で書かれている HTML。あなたは以下を見ることができますview-model定義。それはES6 例ですが、使用することもできます TypeScript。
app.js
export class MyComponent {
header = "This is Header";
content = "This is content";
}
次の例に示すように、値をビューにバインドできます。 ${header}構文は定義されたものをバインドします header からの値 MyComponent。同じ概念が適用されますcontent。
app.html
<template>
<h1>${header}</h1>
<p>${content}</p>
</template>
上記のコードは次の出力を生成します。
コンポーネント機能
ユーザーがボタンをクリックしたときにヘッダーとフッターを更新する場合は、次の例を使用できます。今回は定義していますheader そして footer 内部 EC6 クラスコンストラクタ。
app.js
export class App{
constructor() {
this.header = 'This is Header';
this.content = 'This is content';
}
updateContent() {
this.header = 'This is NEW header...'
this.content = 'This is NEW content...';
}
}
追加できます click.delegate() 接続する updateContent()ボタンで機能します。これについては、後続の章の1つで詳しく説明します。
app.html
<template>
<h1>${header}</h1>
<p>${content}</p>
<button click.delegate = "updateContent()">Update Content</button>
</template>
ボタンをクリックすると、ヘッダーとコンテンツが更新されます。