Aurelia - 数据绑定

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

简单绑定

您已经看到了简单我们之前的一些章节中的约束力. $ {...} 语法用于链接veiw模型和视图.

app.js

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

app.html

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

Aurelia Data Binding Simple

双向装订

Aurelia的美丽在于其简约.当我们绑定到输入字段时,会自动设置双向数据绑定

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>

现在,我们将视图模型和视图链接起来.每当我们在输入字段中输入一些文本时,视图就会更新.

Aurelia Data Binding Two Way