Aurelia - Dữ liệu ràng buộc

Aurelia có hệ thống ràng buộc dữ liệu của riêng mình. Trong chương này, bạn sẽ học cách liên kết dữ liệu với Aurelia và cũng giải thích các cơ chế liên kết khác nhau.

Ràng buộc đơn giản

Bạn đã thấy ràng buộc đơn giản trong một số chương trước của chúng tôi. ${...}cú pháp được sử dụng để liên kết veiw-model và view.

app.js

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

app.html

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

Ràng buộc hai chiều

Vẻ đẹp của Aurelia nằm ở sự đơn giản của nó. Liên kết dữ liệu hai chiều được đặt tự động khi chúng tôi liên kết vớiinput lĩnh vực

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>

Bây giờ, chúng tôi đã liên kết mô hình và chế độ xem của chúng tôi. Bất cứ khi nào chúng ta nhập một số văn bản bên tronginput trường, chế độ xem sẽ được cập nhật.