Aurelia-데이터 바인딩

Aurelia에는 자체 데이터 바인딩 시스템이 있습니다. 이 장에서는 Aurelia로 데이터를 바인딩하는 방법을 배우고 다양한 바인딩 메커니즘을 설명합니다.

단순 바인딩

이전 장의 일부에서 이미 간단한 바인딩을 보았습니다. ${...}구문은 veiw-model과보기를 연결하는 데 사용됩니다.

app.js

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

app.html

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

양방향 바인딩

Aurelia의 아름다움은 단순함에 있습니다. 양방향 데이터 바인딩은 바인딩 할 때 자동으로 설정됩니다.input 필드

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>

이제 뷰 모델과 뷰가 연결되었습니다. 내부에 텍스트를 입력 할 때마다input 필드에서보기가 업데이트됩니다.