Search code examples
polymerpolymer-1.02-way-object-databinding

How to reflect change from child to parent in Polymer

The current code is below. I have element-value in the main file. This value is passed to the child elements app-element and from there to app-element-add.

The value changes in app-element-add. But I cannot get the value reflected in the main element.

The observers never get invoked.

main.html 

<app-element element-value = {{ elementValue }}></app-element>

Polymer({

  is: 'app-main-element',

  properties: {
    elementValue: {
      type:Array,
      notify:true,
      observer:'listUpdated'
    } 
  });

app-element.html

<app-element-add element-value = {{ elementValue }}></app-element-add>
 Polymer({

  is: 'app-element',

  properties: {
    elementValue: {
      type:Array,
      notify:true,
      observer:'listUpdated'
    } 
  });

app-element-add.html

Polymer({

  is: 'app-element-add',

  properties: {
    elementValue: {
      type:Array,
      notify:true,
      reflectToAttribute:true
    } 
  });

Any hints on how to reflect changes in app-element-add in app-main-element. Thanks.

Solution

  • You don't need to use reflectToAttribute here. The only option required here is notify. However, your current code works:

    HTMLImports.whenReady(_ => {
  "use strict";

  Polymer({
    is: 'app-main-element',
    properties : {
      elementValue: {
        type: Array,
        notify: true,
        observer: 'listUpdated',
        value: _ => [100,200,300]
      }
    },
    listUpdated: function() {
      console.log('[app-main-element] list updated');
    },
    ready: function() {
      console.log('[app-main-element] ready');
    }
  });

  Polymer({
    is: 'app-element',
    properties : {
      elementValue: {
        type: Array,
        notify: true,
        observer: 'listUpdated'
      }
    },
    listUpdated: function() {
      console.log('[app-element] list updated');
    },
    ready: function() {
      console.log('[app-element] ready');
    }
  });

  Polymer({
    is: 'app-element-add',
    properties : {
      elementValue: {
        type: Array,
        notify: true
      }
    },
    ready: function() {
      console.log('[app-element-add] ready (will set elementValue in 1000ms)');

      this.async(_ => {
        console.log('[app-element-add] updating elementValue');
        this.elementValue = [1,2,3];
      }, 1000);
    }
  });
});
    <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">
</head>
<body>
  <app-main-element></app-main-element>

  <dom-module id="app-main-element">
    <template>
      <app-element element-value={{elementValue}}></app-element>
      <div>app-main-element.elementValue = [[elementValue]]</div>
    </template>
  </dom-module>

  <dom-module id="app-element">
    <template>
      <app-element-add element-value={{elementValue}}></app-element-add>
      <div>app-element.elementValue = [[elementValue]]</div>
    </template>
  </dom-module>

  <dom-module id="app-element-add">
    <template>
      <div>app-element-add.elementValue = [[elementValue]]</div>
    </template>
  </dom-module>
</body>

    codepen