1.

What Are The Binding Behaviour In Aurelia?

Answer»

BINDING behavior as a filter that can change binding data and display it in different format.

THROTTLEThis behavior is used to set how often should some binding update. We can use throttle to slow down rate of updating input view-model. Consider the example from our 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

${myData}

 Debounce : debounce is almost the same as throttle. The difference is that debounce will update binding after user stopped typing. Example below will update binding if user stops typing for two seconds.

app.js

export class App
{

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

app.html

 ${myData}

 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

${myData}

Binding behavior as a filter that can change binding data and display it in different format.

Throttle : This behavior is used to set how often should some binding update. We can use throttle to slow down rate of updating input view-model. Consider the example from our 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

 Debounce : debounce is almost the same as throttle. The difference is that debounce will update binding after user stopped typing. Example below will update binding if user stops typing for two seconds.

app.js

export class App
{

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

app.html

 ${myData}

 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

${myData}



Discussion

No Comment Found