Question

使用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);
  }
}

例如，为了捕获所有点击事件并传递给fire和asyncFire，使用this.shadowRoot.addEventListener捕获所有点击事件是最有效的方法，传递给fire或asyncFire，或者有更好，更有效的方式来倾听<polymer-element>本身。

Answer 1

我不确定这里的确切问题是什么，但是你使用的技术很好，而且我正在做的事情重新定位事件。

为了澄清一些事情，事件会从影子树中冒出来，但是当它们越过阴影边界时，它们会重新定位到影子主机。点击事件的问题是目标属性不是事件的一部分，而是锚标记的一部分，因此当重新定位事件时，您将失去对该属性的访问权。

另外，我认为on['*']不起作用。我没有看到任何关于它的文档，并且对它的一些测试不起作用。相反，只是让一个元素包含你的元素，任何节点都可以监听任何事件类型，这应该可以作为广播者使用。如果您尝试将事件传递到另一个帧，我将配置事件总线以转发某组事件类型。

PolymerElement - 捕获要传递给CustomEvent的onClick事件

1 个答案: