结合行为（Binding Behavior）

优质

小牛编辑

131浏览

2023-12-01

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

Throttle

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

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

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

debounce与throttle差不多。区别在于，debounce将在用户停止输入后更新绑定。如果用户停止键入两秒钟，以下示例将更新绑定。

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

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

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

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

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

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