Aurelia - 绑定Behave


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

风门

此Behave用于设置进行某些绑定更新的频率。我们可以使用throttle来减慢输入视图模型的更新速度。考虑上一章的例子。默认速率为200 毫秒。我们可以通过在输入中添加&throttle:2000将其更改为2 秒。

应用程序.js

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

应用程序.html

<template>
   <input id = "name" type = "text" value.bind = "myData & throttle:2000" />
   <h3>${myData}</h3>
</template>
Aurelia 绑定Behave限制

去抖动

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

应用程序.js

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

应用程序.html

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

一度

oneTime是最有效的Behave表现方式。当您知道数据应该只绑定一次时,您应该始终使用它。

应用程序.js

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

应用程序.html

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

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