Aurelia - Datenbindung

Aurelia hat ein eigenes Datenbindungssystem. In diesem Kapitel erfahren Sie, wie Sie Daten mit Aurelia binden und die verschiedenen Bindungsmechanismen erläutern.

Einfache Bindung

Sie haben bereits in einigen unserer vorherigen Kapitel eine einfache Bindung gesehen. ${...}Die Syntax wird verwendet, um das veiw-Modell und die Ansicht zu verknüpfen.

app.js.

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

app.html

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

Zweiwegebindung

Die Schönheit von Aurelia liegt in seiner Einfachheit. Die bidirektionale Datenbindung wird automatisch festgelegt, wenn wir an bindeninput Felder

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>

Jetzt haben wir unser Ansichtsmodell und unsere Ansicht verknüpft. Wann immer wir einen Text in das eingebeninput Feld wird die Ansicht aktualisiert.