Aurelia - Data Binding

Aurelia has its own data-binding system. In this tutorial we will show you how to bind data with Aurelia, and also explain different binding mechanics.

Simple Binding

You already saw simple binding in some of our previous chapters. ${...} syntax is used to link veiw-model and view.

app.js

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

app.html

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

Two way Binding

The beauty of Aurelia is in its simplicity. The two-way data binding is automatically set when we bind to input fields.

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>

Now we have our view-model and view linked. Whenever we enter some text inside input field, the view will be updated.