Aurelia - 绑定行为

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

节流阀

此行为用于设置某些绑定更新的频率。我们可以使用节流阀来减慢更新输入视图模型的速度。考虑上一章中的示例。默认速率为200 毫秒。我们可以通过在输入中添加& throttle: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>

Debounce

debounce 与 throttle 几乎相同。不同之处在于，debounce 会在用户停止输入后更新绑定。以下示例将在用户停止输入两秒钟后更新绑定。

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>

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