2

getter を介して公開された EventStreamProvider を持つ WebComponent にカスタム イベント ハンドラーをバインドしようとしましたが、「Class 'DivElement' has no instance getter 'onMainAction'.」というメッセージが表示されます。

コンポーネントの .dart コードを削除しました...

import 'dart:html';
import 'dart:async';
import 'package:web_ui/web_ui.dart';

class SegmentedButtonsListComponent extends WebComponent {
  static const EventStreamProvider<CustomEvent> mainActionEvent = const EventStreamProvider<CustomEvent>("MainActionEvent");
  Stream<CustomEvent> get onMainAction => mainActionEvent.forTarget(this);
}

コンポーネントの使用量の削減…</p> 

<x-segmented-buttons-list id="segmented-buttons-list" on-main-action="eventHandler($event)"></x-segmented-buttons-list>

main.dart からトリミングされたコード…</p> 

import 'dart:html';
import 'dart:async';
import 'package:web_ui/web_ui.dart';

const EventStreamProvider<CustomEvent> mainActionEvent = const EventStreamProvider<CustomEvent>("MainActionEvent");

void eventHandler(CustomEvent event) {
  print("""
    Yabba Dabba Doo!
    Type: ${event.type}
    Detail: ${event.detail}
  """);
}

void main() {
  mainActionEvent.forTarget(query('#segmented-buttons-list')).listen(eventHandler);
}

「MainActionEvent」カスタム イベントは、この「リスト」コンポーネント内でインスタンス化されたコンポーネントによってディスパッチされています。

上記の例からわかるように、main.dart で EventStreamProvider を作成し、コンポーネントをターゲットにすると、イベントをキャッチできます。これは正常に動作します (ただし、コンポーネントの Stream ゲッターはバイパスされます)。

しかし、main.dart の EventStreamProvider を省略して、コンポーネントの onMainEvent ゲッターに単純にバインドできれば素晴らしいことです。

それは可能ですか？

更新 2013-05-05: Siggi は、現時点ではこれを行うことはできませんが、要素の xtag を介してコンポーネントの CustomEventProvider の getter を参照する方法があることを以下で説明しています。main() イベント ループが終了するまで xtag が入力されないため、main() が完了した後にタイマーを使用して DOM をクエリする必要があることがわかりました。

void postMainSetup() {
  query('#segmented-buttons-list').xtag.onMainAction.listen(eventHandler);
}

void main() {
  Timer.run(postMainSetup);
}

上記のセットアップでは、コンポーネントを監視するために新しい CustomEventProvider は必要ありません。

4

1 に答える 1

3

良い質問！

この質問にはいくつかの部分があります。

  • カスタム イベントをコンポーネントで直接使用する: 現在、web_ui は異なるオブジェクトを使用して、コンポーネントとそれが表す実際の dom 要素を表します。将来的には、「WebComponent」の代わりに「DivElement」から直接拡張する予定であり、それによってあなたが書いたことができるようになります。

    一方、コンポーネントのホストまたはシャドウ ルートを使用する場合は、より明確にする必要があります。あなたの例では、イベントをホストに添付したいように見えるので、次のようにもっと書く必要があります:

    Stream<CustomEvent> get onMainAction => mainActionEvent.forTarget(this.host);

  • コンポーネントで 'on-someting-foo' 構文を使用している場合: おそらくバグ/欠落している機能が見つかりました =)。現在、属性を特別な方法で扱い、ターゲットがコンポーネントに対応していると識別した場合、それらの値をコンポーネントのフィールドにバインドします。これは値バインディングに対して行いますが、カスタム イベントのバインディングに対してはまだ行っていません。この機能が追加される前の回避策は、要素を照会し、イベントを手動でアタッチすることです。

    query('#host-node').xtag.onMainAction.listen(...);

于 2013-05-03T22:00:23.943 に答える