- Aurelia教程
- Aurelia - 主页
- Aurelia - 概述
- Aurelia - 环境设置
- Aurelia - 第一次应用
- Aurelia - 组件
- Aurelia - 组件生命周期
- Aurelia - 自定义元素
- Aurelia - 依赖注入
- Aurelia - 配置
- Aurelia - 插件
- Aurelia - 数据绑定
- Aurelia - 绑定Behave
- Aurelia - 转换器
- Aurelia - 活动
- Aurelia - 事件聚合器
- Aurelia - 表格
- Aurelia - HTTP
- Aurelia - 参考
- Aurelia - 路由
- Aurelia - 历史
- Aurelia - 动画
- Aurelia - 对话
- Aurelia - 本地化
- Aurelia - 工具
- Aurelia - 捆绑
- Aurelia - 调试
- Aurelia - 社区
- Aurelia - 最佳实践
- Aurelia有用的资源
- Aurelia - 快速指南
- Aurelia - 有用的资源
- Aurelia - 讨论
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>
去抖动
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>
上面的示例将文本绑定到视图。但是,如果我们更改默认文本,则不会发生任何情况,因为它仅绑定一次。