Aurelia - 数据绑定

• 

  简述

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

  简单绑定

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

  应用程序.js

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

  应用程序.html

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

  
• 

  双向绑定

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

  应用程序.js

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

  应用程序.html

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

  现在，我们有我们的视图模型和视图链接。每当我们在input字段，视图将被更新。