Polymer.Dart を使用して単一ページのアプリを作成し、双方向の EventBus を実現する最善の方法を考えていました。
その子からと<polymer-element>
を使います。親から、を使用してすべてのイベントをキャプチャします。fire
asyncFire
<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 に渡すことfire
がasyncFire
、すべてのオンクリック イベントをキャプチャする最も効率的な方法であり、 and をorにthis.shadowRoot.addEventListener
渡すか、それ自体をリッスンするためのより効率的な方法があります.fire
asyncFire
<polymer-element>