Aurelia Binding Behaviors

In our previous tutorial, we learn about Aurelia App Config & Plugins. In our next topic we will discuss Aurelia Binding Behaviors.

A binding behavior acts as a filter that change binding data to display a different format.
Here are a few samples of binding behaviors:

Binding Behavior 1 – Throttle

This binding behavior sets the frequency of a binding update. We can use this to slow down the rate of updating the view-model. By default, 200ms is the rate. But by adding “&throttle:2000” in the input.

App.js file:

export class App {

  constructor(){
     this.myData = ‘Enter some text!’;
  }
}

App.html file:

<template>

  <input id = “name” type = “text” value.bind = “myData & throttle:2000” />
  <h3>${myData}</h3>
</template>

Binding Behavior 2 – Debounce

This behavior is similar with throttle, but the difference is debounce will be updated once the user stopped typing. For example, below sample will be updated if the user will stop typing for 2 seconds.

App.js file:

export class App {

  constructor(){
     this.myData = ‘Enter some text!’;
  }
}

App.html file:

<template>

  <input id = “name” type = “text” value.bind = “myData & debounce:2000” />
  <h3>${myData}</h3>
</template>

Binding Behavior 3 – One Time

Performance wise, one time is the most efficient behavior. It is recommended to use when a data is only bound once.

App.js file:

export class App {

  constructor(){
     this.myData = ‘Enter some text!’;
  }
}

App.html file:

<template>

  <input id = “name” type = “text” value.bind = “myData & oneTime” />
  <h3>${myData}</h3>
</template>

On our next article, we are going to tackle Aurelia Routing.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.