Aurepa - Binding Behavior

In this chapter, you will learn how to use behaviors. You can think of binding behavior as a filter that can change the binding data and display it in a different format.

Throttle

This behavior is used to set how often should some binding update take place. We can use throttle to slow down the rate of updating input view-model. Consider the example from the last chapter. The default rate is 200 ms. We can change that to 2 sec by adding & throttle:2000 to our input.

app.js

export class App {  
   constructor() {
      this.myData =  Enter some text! ;
   }
}

app.html

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

Debounce

debounce is almost the same as throttle. The difference being, debounce will update the binding after the user has stopped typing. The following example will update the binding if the user stops typing for two seconds.

app.js

export class App {  
   constructor() {
      this.myData =  Enter some text! ;
   }
}

app.html

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

oneTime

oneTime is the most efficient behavior performance wise. You should always use it when you know that data should be bound only once.

app.js

export class App {  
   constructor() {
      this.myData =  Enter some text! ;
   }
}

app.html

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

The above example will bind the text to the view. However, if we change the default text, nothing will happen since it is bound only once.