Polymer - Accessing Root Element

Question

I'm learning Polymer. I've been trying to integrate Polymer into an existing page. In an attempt to do that, I have the following:

  <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>

This is a learning exercise regarding iron-signals. I understand how to use iron-signals within a Polymer app. However, I'm trying to fire off a signal from outside of the app. When I do this, I get the following error:

this.fire is not a function

I understand why I'm getting the error. However, I guess I don't understand how to get a reference to the actual Polymer object so that I can call the fire function.

score 0 · Accepted Answer · edited May 23 '17 at 10:27

0

You need to wait for Polymer to upgrade the elements. See Polymer and WebComponentsReady event

When you do this inside an element your code isn't called before Polymer is ready. Outside you have to take care yourself.

edited May 23 '17 at 10:27

Community

1
1

answered Dec 04 '15 at 15:54

Günter Zöchbauer

623,577
216
2,003
1,567

Even when I wait for WebComponentsReady, `this.fire(...)` still causes a `this.fire is not a function` error. – JQuery Mobile Dec 04 '15 at 18:25
I see. `fire()` is a function of a Polymer element. If your code doesn't run inside an element, `fire()` is not available. You can use `dispatchEvent()` instead https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent. It depends on what you actually want to achieve. You can also `querySelector()` a Polymer element and call `fire()` on the element. – Günter Zöchbauer Dec 04 '15 at 18:31

Polymer - Accessing Root Element

1 Answers1