4

Polymer.Dart を使用して単一ページのアプリを作成し、双方向の EventBus を実現する最善の方法を考えていました。

その子からと<polymer-element>を使います。親から、を使用してすべてのイベントをキャプチャします。fireasyncFire<polymer-element>window.on['*'].listen

<polymer-element>がカプセル化されているため、要素自体の外にイベントが発生することはありません。

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
  @published int count = 0;

  ClickCounter.created() : super.created() {
    this.shadowRoot.addEventListener('click', (e) {
      if(e.target is AnchorElement) {
        AnchorElement anchor = e.target;
        this.asyncFire('ce', detail: "Anchor ${anchor.pathname}", canBubble: true);
        e.preventDefault();
      }
    }, true);
  }

  void increment(Event event, var detail, Node target) {
    count++;
    this.asyncFire('ce', detail: "Click...$count..", canBubble: true);
  }
}

たとえば、すべてのオンクリック イベントをキャッチするには、 and に渡すことfireasyncFire、すべてのオンクリック イベントをキャプチャする最も効率的な方法であり、 and をorにthis.shadowRoot.addEventListener渡すか、それ自体をリッスンするためのより効率的な方法があります.fireasyncFire<polymer-element>

4

1 に答える 1

2

ここでの正確な質問が何であるかはわかりませんが、使用している手法は問題なく、イベントのリターゲットを回避するために私が行っていることです.

いくつかのことを明確にするために、イベントはシャドウ ツリーからバブル アウトしますが、シャドウ バウンダリを超えると、シャドウ ホストに再ターゲットされます。クリック イベントの問題は、ターゲット プロパティがイベントの一部ではなく、アンカー タグの一部であるため、イベントが再ターゲットされると、プロパティにアクセスできなくなることです。

また、うまくいかないと思いon['*']ます。それに関するドキュメントは見当たらず、一部のテストは機能しません。代わりに、任意のノードが任意のイベント タイプをリッスンできる要素を要素で囲むだけで、ブロードキャスターとしてうまく機能するはずです。イベントを別のフレームにパイプしようとしている場合は、特定のイベント タイプのセットを転送するようにイベント バスを構成します。

于 2014-05-19T22:38:26.053 に答える