Aurelia - Binding Behavior

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

Throttle

使用此行为设置进行某些绑定更新的频率.我们可以使用 throttle 来降低更新输入视图模型的速度.考虑上一章的例子.默认速率 200 ms .我们可以通过添加&来将其更改为 2秒油门:2000 到我们的输入.

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>

Aurelia Binding Behavior 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>

上面的示例将文本绑定到视图.但是,如果我们更改默认文本,则不会发生任何事情,因为它只绑定一次.