在Aurelia computeds中,当设置依赖关系时,如何声明对对象属性的依赖关系
In Aurelia computeds, when setting dependencies, how would declare a dependency on an object property
当您设置Aurelia计算属性时,您可以声明依赖项以避免轮询(请参阅:恒定轮询是Aurelia';的更改检测的工作方式吗?)。
get fullName(){
return `${this.firstName} ${this.lastName}`;
}
}
declarePropertyDependencies(Welcome, 'fullName', ['firstName', 'lastName']);
但是,如果你想使用对象属性中的值,你会怎么做呢?
this.person = { firstName: 'John', lastName: 'Doe' }
get fullName(){
return `${this.person.firstName} ${this.person.lastName}`;
}
当然,这显示得很好,但当您更改person.firstName或person.lastName:的值时,根据下面为计算的声明依赖项不会触发更新
declarePropertyDependencies(Welcome, 'fullName', ['person.firstName', 'person.lastName']);
也不是这个:
declarePropertyDependencies(Welcome, 'fullName', ['person']);
对于当前的declareDelationships代码,这可能吗?
更新的答案
现在支持此操作。依赖字符串不再需要是简单的属性访问表达式(例如['firstName', 'lastName']
)。任何在绑定表达式中起作用的东西也将在declarePropertyDependencies
中起作用。示例:
declarePropertyDependencies(Welcome, 'fullName', ['person.firstName', 'person.lastName']);
declarePropertyDependencies(Welcome, 'fullName', ['person.foo().bar[baz], 'x.y.z()']);
原始答案
declarePropertyDependencies
当前不支持此方案。您可以直接使用Aurelia的ObserverLocator类,也可以创建一个这样包装它的类:
multiobserver.js
import {ObserverLocator} from 'aurelia-framework'; // or 'aurelia-binding'
export class MultiObserver {
static inject() { return [ObserverLocator]; }
constructor(observerLocator) {
this.observerLocator = observerLocator;
}
observe(properties, callback) {
var subscriptions = [], i = properties.length, object, propertyName;
while(i--) {
object = properties[i][0];
propertyName = properties[i][1];
subscriptions.push(this.observerLocator.getObserver(object, propertyName).subscribe(callback));
}
// return dispose function
return () => {
while(subscriptions.length) {
subscriptions.pop()();
}
}
}
}
welcome.js
import {MultiObserver} from 'multi-observer';
export class Welcome {
static inject() { return [MultiObserver]; }
constructor(multiObserver) {
this.person = { firstName: 'John', lastName: 'Doe' };
this.updateFullName();
// update fullName when person.firstName/lastName changes.
this.dispose = multiObserver.observe(
[[person, 'firstName'],
[person, 'lastName']],
() => this.updateFullName());
}
updateFullName() {
this.fullName = `${this.person.firstName} {this.person.lastName}`;
}
deactivate() {
this.dispose();
}
}
点击此处了解更多信息。Aurelia的未来版本将包括更多的API和文档,以支持这些常见的对象观察场景。
如果你只需要显示计算值,解决方案要简单得多——在你的视图中这样做:
<template>
Full Name: ${person.firstName} ${person.lastName}
</template>
我不认为这是你的要求,但以防万一。。。
相关文章:
- 单元测试依赖关系没有被嘲笑
- FRP 中 EventStreams 的循环依赖关系
- 节点模块依赖关系
- 在Meteor中使用具有依赖关系的NPM包
- requirejs定义:嵌套依赖关系
- Django管道和javascript依赖关系
- 在Aurelia computeds中,当设置依赖关系时,如何声明对对象属性的依赖关系
- Npm未满足对等依赖关系
- Node.JS处理重复的可传递依赖关系
- 在Firefox上使用聚合物的javascript依赖关系的HTML导入困难;Safari
- 库中的匿名定义()模块's的依赖关系导致库损坏'的家属
- 使用Require.js按照依赖关系的顺序加载JavaScript
- GraphQL代码中的Javascript循环依赖关系
- 使用 grunt 检查单个 javascript 文件时如何解决依赖关系
- 与超类的依赖关系
- 在 Angular JS 业力测试中管理依赖关系
- 在 webpack 中管理 jQuery 插件依赖关系
- requirejs+bower,bower组件中的路径和依赖关系
- 预构建的NPM包:如何为用户省去依赖关系
- 聚合物种子-自定义元素依赖关系