从该元素外部收听聚合物附加事件答案

【问题标题】：Listening to a polymer attached event from outside that element从该元素外部收听聚合物附加事件
【发布时间】：2014-03-10 19:43:54
【问题描述】：

在我的团队中，我们正在尝试为聚合物自定义元素编写一些单元测试。我们的大多数自定义元素都使用 Polymer 的模板绑定功能，因此我们在自定义元素的附加回调下编写了大量代码。在为这些元素编写单元测试时，我只能监听聚合物就绪事件，但我们需要的是仅在聚合物附加事件之后运行我们的测试套件，以便绑定已经完成。

现在我们已经对要检查的元素进行了脏检查，以便我们的测试套件仅在完整模板有界后运行。

我已经看到了 post，其中 Polymer 公开了一种侦听就绪事件的方法，但我们需要的是一种从外部聚合物侦听聚合物附加事件的方法。

【问题讨论】：

标签： polymer

【解决方案1】：

无论您在哪里收听：

window.addEventListener('custom-element-attached', function() {
  console.log('Custom element attached event has fired');
}.bind(this));

您正在尝试收听的元素：

attached: function() {
  var event = new Event('custom-element-attached');
  window.dispatchEvent(event);
}

我还没有测试过这段代码，但它应该可以工作。

【讨论】：

【解决方案2】：

我认为有几种方法可以解决这个问题。

从测试工具中的new domReady callback 或猴子补丁domReady 触发您自己的自定义事件，以便调用该元素已定义的任何回调，并调度自定义事件。
创建一个Mutation Observer，它监视父元素并可以检测何时将新的子元素插入到 DOM 中。我做了an example jsbin。注意：如果您的元素已经在 DOM 中，则 Mutation Observer 将不起作用。您需要先设置 Mutation Observer，然后将您的元素添加到页面。

【讨论】：

domReady 回调是真正的救星：)