Polymer - Make the parent element wait until child element completes execution

Question

I have a element called parent-element with a property called name.

parent-element has a child element called child-element. Both have a two way bound property called name

Adding a code snippet to explain what I told above

<parent-element>
  <template>
    <child-element name={{name}}> </child-element>
  </template>
 <script>
   properties: {
    name: String
    }
 </script>
</parent-element>

My Issue:

I want parent-element to wait until child-element executes and sends back the property name (or) at least the parent-element must re-render after each time child-element sends new value for name property.

Is there any example on how to do this ?

Answer 1

You should mark notify as true in your child element and add observer on name property in your parent element. This way whenever property in child element changes your parent will be notified. Please note you'll need to do a two-way binding from parent to child for it to work. If you don't want parent to update child's property mark child's name property as readOnly

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">

<dom-module id="child-element">
  <template></template>
</dom-module>
<script>
  Polymer({
    is: 'child-element',
    properties: {
      name: {
        type: String,
        notify: true
      }
    },
    attached: function() {
      this.name = "John";
    }
  });
</script>



<dom-module id="parent-element">
  <template>
    [[name]]
    <child-element name="{{name}}"></child-element>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'parent-element',
    properties: {
      name: {
        type: String,
        value: "James",
        observer: '_nameChanged'
      }
    },
    _nameChanged: function(newVal) {
      console.log("Name is", this.name);
    }
  });
</script>

<parent-element></parent-element>