Aurelia-データバインディング

Aureliaには独自のデータバインディングシステムがあります。この章では、データをAureliaにバインドする方法を学習し、さまざまなバインドメカニズムについても説明します。

シンプルバインディング

以前の章のいくつかですでに簡単なバインディングを見てきました。 * $ \ {…} *構文は、veiw-modelとビューをリンクするために使用されます。

export class App {
   constructor() {
      this.myData = 'Welcome to Aurelia app!';
   }
}

<template>
   <h3>${myData}</h3>
</template>

アウレリアの美しさはそのシンプルさにあります。 input フィールドにバインドすると、双方向のデータバインディングが自動的に設定されます

export class App {
   constructor() {
      this.myData = 'Enter some text!';
   }
}

<template>
   <input id = "name" type = "text" value.bind = "myData"/>
   <h3>${myData}</h3>
</template>

これで、ビューモデルとビューがリンクされました。 input フィールドにテキストを入力するたびに、ビューが更新されます。