Aurelia - Comportement contraignant

Dans ce chapitre, vous apprendrez à utiliser behaviors. Vous pouvez considérer le comportement de liaison comme un filtre qui peut modifier les données de liaison et les afficher dans un format différent.

Manette de Gaz

Ce comportement est utilisé pour définir la fréquence à laquelle une mise à jour de liaison doit avoir lieu. On peut utiliserthrottlepour ralentir la vitesse de mise à jour du modèle de vue d'entrée. Prenons l'exemple du dernier chapitre. Le taux par défaut est200 ms. Nous pouvons changer cela en2 sec en ajoutant & throttle:2000 à notre contribution.

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>

Rebondir

debounce est presque le même que throttle. La différence étant que debounce mettra à jour la liaison une fois que l'utilisateur aura arrêté de taper. L'exemple suivant met à jour la liaison si l'utilisateur arrête de taper pendant deux secondes.

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>

une fois

oneTimeest le comportement le plus efficace en termes de performances. Vous devez toujours l'utiliser lorsque vous savez que les données ne doivent être liées qu'une seule fois.

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>

L'exemple ci-dessus liera le texte à la vue. Cependant, si nous modifions le texte par défaut, rien ne se passera car il n'est lié qu'une seule fois.