web-dev-qa-db-ja.com

Aureliaのプロパティ変更サブスクリプション

次のように、値に基づいてイベントをリッスンし、トリガーするビューモデルにプロパティがあります。

class viewModel {
  constructor() {
    this.value = '0';
    let val = 2;
    subscribe(this.value, callbackForValue);
    subscribe(val, callbackForVal);
  }
}

これはAureliaの機能ですか？もしそうなら、そのようなサブスクリプションを設定するにはどうすればよいですか？

javascriptecmascript-6aurelia
34
Matthew James Davis

一部のプラグインでは、コンテナからObserverLocatorインスタンスを取得するためにDIを使用しています。

import {inject} from 'aurelia-dependency-injection';  // or from 'aurelia-framework'
import {ObserverLocator} from 'aurelia-binding';      // or from 'aurelia-framework'

@inject(ObserverLocator)
export class Foo {
    constructor(observerLocator) {
        this.observerLocator = observerLocator;
    }
    ...
}

その後、次のようなことができます。

var subscription = this.observerLocator
    .getObserver(myObj, 'myPropertyName')
    .subscribe(myCallback);

サブスクリプションを破棄する準備ができたら、それを呼び出します。

subscription();

これはすべて変更される可能性があると思いますが、必要に応じてすぐに使用できるものです。

詳細ここ

2015年10月の更新

ObserverLocatorは、Aureliaの内部「ベアメタル」APIです。現在、使用可能なバインディングエンジン用のパブリックAPIがあります。

import {inject} from 'aurelia-dependency-injection';  // or from 'aurelia-framework'
import {BindingEngine} from 'aurelia-binding';        // or from 'aurelia-framework'

@inject(BindingEngine)
export class ViewModel {
  constructor(bindingEngine) {
    this.obj = { foo: 'bar' };

    // subscribe
    let subscription = bindingEngine.propertyObserver(this.obj, 'foo')
      .subscribe((newValue, oldValue) => console.log(newValue));

    // unsubscribe
    subscription.dispose();
  }
}
52
Jeremy Danyow

Observable属性には、 I kill nerds によるバインディングへのオーバーヘッドが少ない。

import {observable} from "aurelia-framework";

export class Example {

    @observable
    public description: string;

    private descriptionChanged(newValue: string, oldValue: string): void {

    }
}
13
sharky101

値に基づいてイベントをリッスンしてトリガーする

TypeScriptを使用したコードのスニペットです。うまくいけばアイデアが得られます。

import {bindingMode} from "aurelia-binding";

export class Example{

    @bindable
    public description: string;

    private descriptionChanged(newValue: string, oldValue: string): void {
        console.log(newValue, oldValue);
    }
}

メソッド名は規則に従う必要があります`${propertyName}Changed`

EDIT：それはまさに Decade Moon 上記のコメントで提案されたものです： Aureliaでのプロパティ変更サブスクリプション

11
Mars Robertson

@observableデコレータは、このシナリオでは正常に機能します。

BindingEngineを使用して、コレクションを監視したり、購読/購読解除のタイミングを制御したりできます。

2
Andrew