Aurelia - Comportamiento vinculante

En este capítulo, aprenderá a utilizar behaviors. Puede pensar en el comportamiento de enlace como un filtro que puede cambiar los datos de enlace y mostrarlos en un formato diferente.

Acelerador

Este comportamiento se utiliza para establecer la frecuencia con la que se debe realizar alguna actualización vinculante. Nosotros podemos usarthrottlepara reducir la velocidad de actualización del modelo de vista de entrada. Considere el ejemplo del último capítulo. La tasa predeterminada es200 ms. Podemos cambiar eso a2 sec añadiendo & throttle:2000 a nuestra 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>

Rebote

debounce es casi lo mismo que throttle. La diferencia es que debounce actualizará el enlace después de que el usuario haya dejado de escribir. El siguiente ejemplo actualizará el enlace si el usuario deja de escribir durante dos 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>

una vez

oneTimees el comportamiento más eficiente en términos de desempeño. Siempre debe usarlo cuando sepa que los datos deben vincularse solo una 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>

El ejemplo anterior vinculará el texto a la vista. Sin embargo, si cambiamos el texto predeterminado, no ocurrirá nada, ya que solo se enlaza una vez.