Aurelia-binding-behavior

アウレリア-結合行動

この章では、*ビヘイビア*の使用方法を学習します。 バインディングの動作は、バインディングデータを変更して別の形式で表示できるフィルターと考えることができます。

スロットル

この動作は、バインディングの更新が行われる頻度を設定するために使用されます。 throttle を使用して、入力ビューモデルの更新速度を遅くすることができます。 前の章の例を検討してください。 デフォルトのレートは 200 ms です。 入力に*＆throttle：2000 を追加することで、これを 2秒*に変更できます。

app.js

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

Copy

appl

<template>
   <input id = "name" type = "text" value.bind = "myData & throttle:2000"/>
   <h3>${myData}</h3>
</template>

Copy

Aureliaバインディング動作スロットル

デバウンス

• デバウンス*は*スロットル*とほぼ同じです。 違いは、デバウンスはユーザーが入力を停止した後にバインディングを更新することです。 次の例は、ユーザーが2秒間入力を停止した場合にバインディングを更新します。

app.js

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

Copy

appl

<template>
   <input id = "name" type = "text" value.bind = "myData & debounce:2000"/>
   <h3>${myData}</h3>
</template>

Copy

一度

*oneTime* は、最も効率的な動作パフォーマンスです。 データを一度だけバインドする必要があることがわかっている場合は、常に使用する必要があります。

Copy

app.js

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

Copy

appl

<template>
   <input id = "name" type = "text" value.bind = "myData & oneTime"/>
   <h3>${myData}</h3>
</template>

Copy

上記の例は、テキストをビューにバインドします。 ただし、デフォルトのテキストを変更しても、バインドされるのは1回だけなので、何も起こりません。