在全球范围内收听所有铁信号

Question

有什么方法可以拦截所有 iron-signals 正在发送 而无需 在 iron-signals 侦听器中明确指定它们的名称？

用例

我想对我的应用程序中发生的事件进行一些处理Google Analytics Event Tracking
由于事件已经在我的应用程序中发送，我想拦截那些已经发送的事件（并适当地过滤它们以获得我想要的）

当前实施

我在我的应用程序中发射铁信号以促进我的不同元素之间的通信，如下所示：

// throughout the app
this.fire("iron-signal", {name: "do-foo"});
this.fire("iron-signal", {name: "do-bar"});
this.fire("iron-signal", {name: "do-baz"});

现在我想要另一个元素，我们称它为 analytics-tracker.html 以拦截所有 <iron-signal> 被触发。这是一个天真的解决方案：

// in analytics-tracker.html
<iron-signals on-iron-signal-do-foo="trackEvent"></iron-signals>
<iron-signals on-iron-signal-do-bar="trackEvent"></iron-signals>
<iron-signals on-iron-signal-do-baz="trackEvent"></iron-signals>

为每个事件添加一个 <iron-signals> 元素很快就会变得难以管理。

可能的解决方案

我可能 "bundle" 所有事件都作为一个命名空间事件，可以像这样跟踪：

// throughout the app
this.fire("iron-signal", {name: "general-event", data: { type: "Do Foo"}});
this.fire("iron-signal", {name: "general-event", data: { type: "Do Bar"}});
this.fire("iron-signal", {name: "general-event", data: { type: "Do Baz"}});

// in analytics-tracker.html
<iron-signals on-iron-signal-general-event="trackEvent"></iron-signals>

理想的解决方案

例如：

// throughout the app
this.fire("iron-signal", {name: "do-foo"});
this.fire("iron-signal", {name: "do-bar"});
this.fire("iron-signal", {name: "do-baz"});

// in analytics-tracker.html
<iron-signals on-iron-signal-*="trackEvent"></iron-signals>

有什么办法可以做到类似于理想的解决方案吗？

Answer 1

我认为你可以为此创建一个事件侦听器，这是最简单的解决方案：

// ...
ready: function()
{
    // signal listener at document
    document.addEventListener('iron-signal', event => {
       this.trackEvent( event.detail );
    });
}
// ...

iron-signals 正在侦听文档中的全局 CustomEvent，其中 event.detail 具有 name 和 data 值，然后 iron-signals 元素调度基于名称的事件在通知方法中。

在全球范围内收听所有铁信号

Listen globally for all iron-signals

polymer

polymer-1.0

用例

当前实施

可能的解决方案

理想的解决方案