Aurelia - comportamento de ligação

Neste capítulo, você aprenderá como usar behaviors. Você pode pensar no comportamento de vinculação como um filtro que pode alterar os dados de vinculação e exibi-los em um formato diferente.

Acelerador

Este comportamento é usado para definir com que freqüência deve ocorrer alguma atualização de ligação. Podemos usarthrottlepara diminuir a taxa de atualização do modelo de visualização de entrada. Considere o exemplo do último capítulo. A taxa padrão é200 ms. Podemos mudar isso para2 sec adicionando & throttle:2000 à nossa entrada.

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 é quase o mesmo que throttle. A diferença é que o debounce atualizará a ligação depois que o usuário parar de digitar. O exemplo a seguir atualizará a ligação se o usuário parar de digitar por dois segundos.

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>

um tempo

oneTimeé o comportamento mais eficiente em termos de desempenho. Você deve sempre usá-lo quando souber que os dados devem ser vinculados apenas uma vez.

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>

O exemplo acima vinculará o texto à visualização. No entanto, se alterarmos o texto padrão, nada acontecerá, pois ele é vinculado apenas uma vez.