Aurelia - 绑定行为

• 

  简述

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

  Throttle

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

  应用程序.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>
  

  
• 

  Debounce

  debounce几乎和throttle一样. 不同之处在于，debounce 将在用户停止输入后更新绑定。如果用户停止输入两秒钟，以下示例将更新绑定。

  应用程序.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是最有效的行为表现。当您知道数据应该只绑定一次时，您应该始终使用它。

  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>
  

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