1

Aurelia の計算済みプロパティを設定すると、依存関係を宣言してポーリングを回避できます ( Is constant polling the way Aurelia's change detection is working?を参照してください)。

   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 コードで可能ですか?

4

1 に答える 1

5

更新された回答

これがサポートされるようになりました。依存関係の文字列は、単純なプロパティ アクセス式 ( など) である必要はなくなりまし['firstName', 'lastName']た。バインディング式で機能するものはすべて、.xml でも機能しdeclarePropertyDependenciesます。例:

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

元の回答

現在、このシナリオは ではサポートされていませんdeclarePropertyDependencies。Aurelia の ObserverLocator クラスを直接使用するか、次のようにラップするクラスを作成できます。

multi-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()();
      }
    }
  }
}

ようこそ.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>

これはあなたが求めているものではないと思いますが、念のため...

于 2015-03-27T02:48:03.830 に答える