Aurelia 绑定行为
在本章中,您将学习如何使用
行为。您可以将绑定行为视为可以更改绑定数据并以不同格式显示的过滤器。
Throttle
此行为用于设置某些绑定更新发生的频率。我们可以使用
throttle 来减慢更新输入视图模型的速度。考虑上一章的例子。默认速率为
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>
上面的例子将文本绑定到视图。但是,如果我们更改默认文本,则不会发生任何事情,因为它只绑定一次。