Aurelia - Liaison de données

Aurelia a son propre système de liaison de données. Dans ce chapitre, vous apprendrez à lier des données avec Aurelia et expliquerez également les différents mécanismes de liaison.

Reliure simple

Vous avez déjà vu une simple reliure dans certains de nos chapitres précédents. ${...}La syntaxe est utilisée pour lier veiw-model et view.

app.js

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

app.html

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

Reliure bidirectionnelle

La beauté d'Aurelia réside dans sa simplicité. La liaison de données bidirectionnelle est automatiquement définie lorsque nous nous lions àinput des champs

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>

Maintenant, nous avons notre modèle de vue et notre vue liés. Chaque fois que nous entrons du texte dans leinput champ, la vue sera mise à jour.