Aurelia——绑定行为

在本章，您将学习如何使用行为。您可以将绑定行为视为一个过滤器，它可以改变绑定数据并以不同的格式显示数据。

节流

此行为用于设置某些绑定更新应多久发生一次。我们可以使用节流来降低输入视图模型更新的速率。请考虑上一章中的示例。默认速率为200 毫秒。我们可以通过将&；节流：2000添加到我们的输入来将它更改为2 秒。

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>

去抖

去抖几乎与节流相同。区别在于，去抖将在用户停止键入后更新绑定。以下示例将在用户停止键入两秒后更新绑定。

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>

oneTime

oneTime在性能方面是最有效的行为。如果您知道数据只需要绑定一次，则应始终使用它。

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>

上例将文本绑定到视图。但是，如果我们更改默认文本，则不会发生任何情况，因为它仅绑定一次。