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.