Aurelia - 資料繫結

Aurelia 有自己的資料繫結系統。在本章中，您將學習如何使用 Aurelia 繫結資料，還將解釋不同的繫結機制。

簡單繫結

您已經在我們之前的章節中看到了簡單繫結。${...}語法用來連結檢視模型和檢視。

app.js

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

app.html

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

雙向繫結

Aurelia 的美在於它的簡單性。當我們繫結到 **input** 欄位時，會自動設定雙向資料繫結。

app.js

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

app.html

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

現在，我們將檢視模型和檢視連結起來。每當我們在 **input** 欄位中輸入一些文字時，檢視都會更新。