Polymer Sending / Receiving Events Among Brother Elements

Question

Polymer Sending / Receiving Events Among Brother Elements

Suppose I have two sibling elements, and <element-b>fires an event. How to <element-a>listen to an event without having to add imperative code to the parent?

<dom-module id="parent-element">
  <element-a></element-a>
  <element-b></element-b>
</dom-module>

where <element-a>and <element-b>:

<dom-module id="element-a">
  <template>
    <style include="shared-styles">
    </style>
  </template>

  <script>
    Polymer({
      is: 'element-a',
      listeners: {
        'element-b': 'handleEvent',
      },
      ready: function() {
        console.log('fired from element a')
        this.fire('element-a', {employee: ''});
      },
      handleEvent: function (e) {
        console.log('received element b event', e)
      }
    });
  </script>
</dom-module>

<dom-module id="element-b">
  <template>
    <style include="shared-styles">
    </style>
  </template>

  <script>
    Polymer({
      is: 'element-b',
      listeners: {
        'element-a': 'handleEvent',
      },
      ready: function() {
        console.log('fired from element b')
        this.fire('element-b', {employee: ''});

      },
      handleEvent: function (e) {
        console.log('received element a event', e)
      }
    });
  </script>

Thank!

+4

polymer polymer-1.0

user3240644 Feb 02 '17 at 14:09

source share

1 answer

tony19 · Accepted Answer · 2017-02-02T17:20:11+0000

You can use <iron-signals>for this.

Add a listener <iron-signals>in one element:

// element-b
<iron-signals on-iron-signal-element-a="_onSignalElementA"></iron-signals>

_onSignalElementA: function(e) {
  const newDate = e.detail;
  ...
}

... and fire the event iron-signal(with data) in another:

// element-a
this.fire('iron-signal', {name: 'element-a', data: new Date()});

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo'
  });
  Polymer({
    is: 'element-a',
    _onClick: function() {
      this.fire('iron-signal', {name: 'element-a', data: new Date()});
    }
  });
  
  Polymer({
    is: 'element-b',
    _onSignalElementA: function(e) {
      this._message = `b received: ${e.detail}`;
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.11.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-signals/iron-signals.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <element-a></element-a>
      <element-b></element-b>
    </template>
  </dom-module>
  <dom-module id="element-a">
    <template>
      <button on-tap="_onClick">Fire event</button>
    </template>
  </dom-module>
  <dom-module id="element-b">
    <template>
      <iron-signals on-iron-signal-element-a="_onSignalElementA"></iron-signals>
      <div>[[_message]]</div>
    </template>
  </dom-module>
  
</body>

Run code

codepen

Polymer Sending / Receiving Events Among Brother Elements

More articles: