Aurelia - Associazione dati

Aurelia dispone di un proprio sistema di associazione dei dati. In questo capitolo imparerai come associare i dati con Aurelia e spiegherai anche i diversi meccanismi di associazione.

Rilegatura semplice

Hai già visto un semplice legame in alcuni dei nostri capitoli precedenti. ${...}la sintassi viene utilizzata per collegare veiw-model e view.

app.js

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

app.html

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

Rilegatura a due vie

La bellezza dell'Aurelia sta nella sua semplicità. L'associazione dati a due vie viene impostata automaticamente quando ci colleghiamo ainput campi

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>

Ora abbiamo il nostro modello di visualizzazione e la vista collegati. Ogni volta che inseriamo del testo all'interno del fileinput campo, la visualizzazione verrà aggiornata.