Polymer communication between elements

Question

I want to achieve communication between child parent with Polymer element.

Here my index.html

<proto-receiver data="message">
        <proto-element data="message"></proto-element>
</proto-receiver>

Both element have their respective "data" property

properties: {
   data: {
      value: 'my-data',
      notify: true,
   }
},

In proto-receiver, which is the parent I update "data" by handling simple click

<template>
    <span on-tap="onClick">proto receiver: {{data}}</span>
    <content></content>
</template> 


onClick: function () {
    this.data = 'new-message';
},

I want the change to be propagate to the child element as well, as it mentioned here.

I achieve this by passing a setter in my child element and called it like this. Which is, I guess, not the way it should be done.

 Polymer.Base.$$('body').querySelector('proto-element').setData(this.data);

What I'm doing wrong

Thanks

UPDATE:

For those coming here. The proper way of doing this is by using Events.

Polymer 1.x

this.fire('kick', {kicked: true});

Polymer 2.x (simple javascript)

this.dispatchEvent(new CustomEvent('kick', {detail: {kicked: true}}));

In both case the receiver should implement the regular addEventListener

document.querySelector('x-custom').addEventListener('kick', function (e) {
    console.log(e.detail.kicked); // true
})

Probably you want `Polymer.dom(this).querySelector('proto-element').setData(this.data);`. However, if your `proto-*` objects are themselves inside a Polymer template, you can use data-binding to do this for you. — Scott Miles, Feb 17 '16 at 17:50
Thanks Scott. Did you mean that the change are not propagate due to the tag? Effectively putting my child element directly inside the parent Polymer template work just fine. Seems that the same problem are mentioned [here](http://stackoverflow.com/questions/26369519/bind-data-to-content-element-in-polymer) — aiqency, Feb 17 '16 at 18:02
`` changes the _rendering_ context but it doesn't change the actual tree relationships. In your example, `proto-element` remains a direct child of `proto-receiver` regardless of ``. What I meant above was that if both elements are themselves in a template, you can bind them directly: `` — Scott Miles, Feb 17 '16 at 18:05

score 4 · Answer 1 · edited May 23 '17 at 12:32

To provide a concrete example to Scott Miles' comments, if you can wrap your parent and child elements in a Polymer template (such as dom-bind or as children to yet another Polymer element), then you can handle this declaratively. Check out the mediator pattern.

parent element:

<dom-module id="parent-el">
  <template>
    <button on-tap="onTap">set message from parent-el</button>
    <p>parent-el.message: {{message}}</p>
    <content></content>
  </template>
  <script>
    Polymer({
      is: 'parent-el',
      properties: {
        message: {
          type: String,
          notify: true
        }
      },
      onTap: function() {
        this.message = 'this was set from parent-el';
      }
    });
  </script>
</dom-module>

child element:

<dom-module id="child-el">
  <template>
    <p>child-el.message: {{message}}</p>
  </template>
  <script>
    Polymer({
      is: 'child-el',
      properties: {
        message: {
          type: String,
          notify: true
        }
      }
    });
  </script>
</dom-module>

index.html:

<template is="dom-bind" id="app">
  <parent-el message="{{message}}">
    <child-el message="{{message}}"></child-el>
  </parent-el>
</template>
<script>
  (function(document) {
    var app = document.querySelector('#app');
    app.message = 'this was set from index.html script';
  }) (document);
</script>

JS Bin

score 2 · Answer 2 · answered Sep 19 '17 at 07:08

2

I was facing same issue and got solution for it and fixed it as below

this.fire('iron-signal', {name: 'hello', data: null});

You can refer this iron-signals you will get the solution which you are looking for its basically event fire from any element to another

Hope this will help you Polymer iron signals

answered Sep 19 '17 at 07:08

Jayant Patil

1,537
2
11
18

It might be good to add that the fire event can also be used to fire up more then one Element. – Niklas Sep 20 '17 at 06:49

Polymer communication between elements

2 Answers2

Linked