Аурелия — привязка данных

Аурелия имеет собственную систему привязки данных. В этой главе вы узнаете, как связывать данные с Aurelia, а также объясните различные механизмы связывания.

Простая привязка

Вы уже видели простую привязку в некоторых из наших предыдущих глав. Синтаксис $ {…} используется для связи veiw-модели и представления.

app.js

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

app.html

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

Двухстороннее связывание

Красота Аурелии в ее простоте. Двусторонняя привязка данных устанавливается автоматически, когда мы связываемся с полями ввода

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>

Теперь у нас есть наша view-модель и view, связанные. Всякий раз, когда мы вводим какой-либо текст в поле ввода , представление будет обновляться.