Aurelia - 数据绑定

Aurelia 有自己的数据绑定系统。在本章中，您将学习如何使用 Aurelia 绑定数据，并解释不同的绑定机制。

简单装订

您已经在前面的一些章节中看到了简单的绑定。${...}语法用于链接 veiw-model 和 view。

应用程序.js

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

应用程序.html

<template>
   <h3>${myData}</h3>
</template>
Aurelia 数据绑定简单

双向绑定

Aurelia 的美丽在于它的简单。当我们绑定到输入字段时，会自动设置双向数据绑定

应用程序.js

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

应用程序.html

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

现在，我们已经链接了视图模型和视图。每当我们在输入字段中输入一些文本时，视图就会更新。

Aurelia 数据绑定两种方式