Aurepa - Data Binding

Aurepa has its own data-binding system. In this chapter, you will learn how to bind data with Aurepa, and also explain the different binding mechanics.

Simple Binding

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

app.js

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

app.html

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

Two-Way Binding

The beauty of Aurepa is in its simppcity. 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 pnked. Whenever we enter some text inside the input field, the view will be updated.