聚合物 - 访问根元素答案

【问题标题】：Polymer - Accessing Root Element聚合物 - 访问根元素
【发布时间】：2015-12-04 15:30:09
【问题描述】：

我正在学习 Polymer。我一直在尝试将 Polymer 集成到现有页面中。为了做到这一点，我有以下几点：

  <body>
    <div class="row">
      <div class="col-sm-8">
        <template is="dom-bind" id="app">
          <iron-signals on-iron-signal-update-greeting="_updateGreeting">
          <div>[[ greeting ]]</div>
        </template>
      </div>

      <div class="col-sm-4">
        <button type="button" click="testClick();">Test</button>
      </div>
    </div>

    <script type="text/javascript">
      function testClick() {
        this.fire('iron-signal', { name: 'updateGreeting', data: { value: 'Hello at ' + (new Date().getMinutes()) } });
      }
    </script>
  </body>

这是一个关于iron-signals 的学习练习。我了解如何在 Polymer 应用程序中使用铁信号。但是，我正在尝试从应用程序外部触发信号。当我这样做时，我收到以下错误：

this.fire is not a function

我明白为什么我会收到错误消息。但是，我想我不明白如何获取对实际 Polymer 对象的引用，以便调用 fire 函数。

【问题讨论】：

标签： polymer

【解决方案1】：

您需要等待 Polymer 升级元素。见Polymer and WebComponentsReady event

当您在一个元素中执行此操作时，您的代码不会在 Polymer 准备好之前被调用。在外面你必须照顾好自己。

【讨论】：

即使我等待 WebComponentsReady，this.fire(...) 仍然会导致 this.fire is not a function 错误。
我明白了。 fire() 是 Polymer 元素的函数。如果您的代码不在元素内运行，则fire() 不可用。您可以使用dispatchEvent() 代替developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent。这取决于您实际想要实现的目标。您还可以querySelector() 一个 Polymer 元素并在该元素上调用 fire()。