Aurelia拥有自己的数据绑定系统.在本章中,您将学习如何使用Aurelia绑定数据,并解释不同的绑定机制.
您已经看到了简单我们之前的一些章节中的约束力. $ {...} 语法用于链接veiw模型和视图.
export class App { constructor() { this.myData = 'Welcome to Aurelia app!'; } }
<template> <h3>${myData}</h3> </template>
Aurelia的美丽在于其简约.当我们绑定到输入字段时,会自动设置双向数据绑定
export class App { constructor() { this.myData = 'Enter some text!'; } }
<template> <input id = "name" type = "text" value.bind = "myData" /> <h3>${myData}</h3> </template>
现在,我们将视图模型和视图链接起来.每当我们在输入字段中输入一些文本时,视图就会更新.