在 Aurelia 计算中，设置依赖项时，如何声明对对象的依赖项属性

Question

当您设置 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']);

当前的 declareDependencies 代码是否可行？

Answer 1

更新答案

现已支持。依赖字符串不再需要是简单的属性访问表达式（例如 ['firstName', 'lastName']）。任何适用于绑定表达式的东西也适用于 declarePropertyDependencies。示例：

declarePropertyDependencies(Welcome, 'fullName', ['person.firstName', 'person.lastName']);
declarePropertyDependencies(Welcome, 'fullName', ['person.foo().bar[baz], 'x.y.z()']);

原答案

declarePropertyDependencies 目前不支持此场景。您可以直接使用 Aurelia 的 ObserverLocator class 或创建一个 class 来包装它：

多observer.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();
  }
}

更多信息here。 Aurelia 的未来版本将包含更多 API 和文档以支持这些常见的对象观察场景。

如果您只需要显示计算值，解决方案就简单多了 - 在您的视图中执行此操作：

<template>
  Full Name:  ${person.firstName} ${person.lastName}
</template>

我认为这不是你要问的，但以防万一...

在 Aurelia 计算中，设置依赖项时，如何声明对对象的依赖项属性

In Aurelia computeds, when setting dependencies, how would declare a dependency on an object property

javascript

aurelia

更新答案

原答案

在 Aurelia 计算中，设置依赖项时，如何声明对对象的依赖项 属性

In Aurelia computeds, when setting dependencies, how would declare a dependency on an object property

javascript

aurelia

更新答案

原答案

在 Aurelia 计算中，设置依赖项时，如何声明对对象的依赖项属性