Aurelia - comportamento vincolante

In questo capitolo imparerai come usare behaviors. Si può pensare al comportamento di associazione come a un filtro che può modificare i dati di associazione e visualizzarli in un formato diverso.

Acceleratore

Questo comportamento viene utilizzato per impostare la frequenza con cui deve essere eseguito un aggiornamento di associazione. Possiamo usarethrottleper rallentare la velocità di aggiornamento dell'input view-model. Considera l'esempio dell'ultimo capitolo. Il tasso predefinito è200 ms. Possiamo cambiarlo in2 sec aggiungendo & throttle:2000 al nostro 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 è quasi uguale a throttle. La differenza è che l'antirimbalzo aggiornerà l'associazione dopo che l'utente ha smesso di digitare. L'esempio seguente aggiornerà l'associazione se l'utente smette di digitare per due secondi.

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 volta

oneTimeè il comportamento più efficiente in termini di prestazioni. Dovresti sempre usarlo quando sai che i dati devono essere associati solo una volta.

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'esempio precedente legherà il testo alla visualizzazione. Tuttavia, se cambiamo il testo predefinito, non accadrà nulla poiché è vincolato solo una volta.