Aurelia - Data Binding

Aurelia tem seu próprio sistema de vinculação de dados. Neste capítulo, você aprenderá como vincular dados com Aurelia e também explicar as diferentes mecânicas de vinculação.

Encadernação Simples

Você já viu ligação simples em alguns de nossos capítulos anteriores. ${...}a sintaxe é usada para vincular o modelo de veículo e a visualização.

app.js

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

app.html

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

Encadernação bidirecional

A beleza de Aurelia está em sua simplicidade. A ligação de dados bidirecional é definida automaticamente, quando nos ligamos ainput Campos

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>

Agora, temos nosso modelo de visão e visão vinculados. Sempre que inserimos algum texto dentro doinput campo, a visão será atualizada.