Aurelia-components

アウレリア-コンポーネント

コンポーネントは、Aureliaフレームワークの主要な構成要素です。 この章では、単純なコンポーネントを作成する方法を学びます。

単純なコンポーネント

前の章ですでに説明したように、各コンポーネントには JavaScript で記述された view-model と HTML で記述された view が含まれています。 次の view-model 定義を見ることができます。 これは ES6 の例ですが、 TypeScript を使用することもできます。

app.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

次の例に示すように、値をビューにバインドできます。 * $ \ {header} * syntaxは、 MyComponent から定義された header 値をバインドします。 content にも同じ概念が適用されます。

appl

<template>
   <h1>${header}</h1>
   <p>${content}</p>
</template>

上記のコードは次の出力を生成します。

Aurelia Components Simple

コンポーネント機能

ユーザーがボタンをクリックしたときにヘッダーとフッターを更新する場合は、次の例を使用できます。 今回は、 EC6 クラスコンストラクター内で header および footer を定義しています。

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（）*関数をボタンに接続できます。 これについては、後続の章で詳しく説明します。

appl

<template>
   <h1>${header}</h1>
   <p>${content}</p>
   <button click.delegate = "updateContent()">Update Content</button>
</template>

ボタンをクリックすると、ヘッダーとコンテンツが更新されます。

Aureliaコンポーネントメソッド