aurelia - Aurelia 自定义绑定行为以观察对象的所有属性
问题描述
我想创建一个自定义绑定行为,允许我检测对象属性的任何更改,如下所示:
<my-form model.bind="myObject & objectObserver:myObjChanged()"></my-form>
我知道我可以使用 Aurelia 的绑定引擎来创建一个属性观察器,也许我可以将它构建到一个自定义的绑定行为中来检测对象的属性并为每个属性创建属性观察器。但我无法理解自定义绑定行为中提供给我的绑定对象。到目前为止,这是我的代码:
import { inject, bindingBehavior, BindingEngine } from 'aurelia-framework';
@bindingBehavior('objectObserver')
@inject(BindingEngine)
export default class ObjectObserverBindingBehavior {
constructor(bindingEngine) {
this.bindingEngine = bindingEngine;
}
bind(binding, scope, interceptor) {
console.warn('hello', binding, scope, interceptor);
}
unbind(binding, scope) {
console.warn('observer.unbind()', binding, scope);
}
}
所以我知道它在起作用,但我不知道开始观看的最佳对象是什么。我在 targetObserver.currentValue 中看到了绑定对象。那是开始观看的最佳属性吗?还有另一种利用 Aurelia Binding Engine 现有功能的方法吗?
解决方案
我发现了一个不是 Aurelia 特定的解决方案,它基于Javascript 中内置的代理功能。
export function onChangeObj(object, onChange) {
// creates Proxy to detect changes in object properties and call a function
if (typeof onChange !== 'function' || typeof object !== 'object') {
throw new Error('onChangeObj: incorrect parameters');
}
const handler = {
set(obj, prop, value) {
onChange(prop, value);
return Reflect.set(obj, prop, value);
},
};
return new Proxy(object, handler);
}
为了使用它,只需像这样调用它:
this.myObject = onChangeObj(this.myObject, () => this.myObjChanged());
实际上,该对象被一个包装代理替换,该包装代理在每次修改属性之一时调用提供的函数(使用设置器)。
如果有人通过 Aurelia Binding Behavior 找到解决方案,我仍然会感兴趣。
推荐阅读
- firebase - Flutter 获取特定的 Firestore 文档数据并将其存储到 String 变量中
- java - 请求数据正确而响应数据不正确时,哪个http状态码合适
- php - 使用由 ':' 分隔的 data-id="" 传递数据数组 | PHP、HTML、SQL
- elixir - 如何自定义 Plug.Parsers JSON 解码器的选项?
- android - Android Studio 更新后无法处理 res 文件
- android - Android Studio:string.xml 编辑器中是否有“换行和插入”功能?
- mysql - 选择具有等于目标行的任何值的所有行
- html - 如何根据加载时的窗口大小以 8 角关闭侧边栏?
- ios - Xcode:从命令行使用旧的构建系统
- database - AWS DynamoDB - 如何设计一个可以有效检索具有特定值/状态的大量项目的表/索引