Event Handling between parent and child page in polymer 1.0

Question

I have a parent polymer element called parent-page and a child element called child-page.

parent-page calls child page and passes an array with it. for e.g, in parent page:

<child-page items={{itemsArray}}></child-page>

Now, on the basis of certain activity child page fires an event with a new array.

eg, in child page:

this.fire('eventPerformed', newArray);

This array is being listened by the parent page and received with expected values. Now, I want to pass that new array to the child page such that the child-page is rendered according to the new array.

How to achieve it?

Edit: my child page looks like this.

<dom-module id="child-page">

<style>
	
</style>

<template>
	
	<template is="dom-repeat" items="{{itemArray}}" as="fooditem">
							
		<div class="horizontal layout">
			<div>{{fooditem.quantity}}</div>
			<div>{{fooditem.name}}</div>
		</div>
	
	</template>
	<paper-button on-click"changeArray"> ChangeArray</paper-button>
	
</template>
	
<script type="text/javascript">

	Polymer({
		is:'child-page',
		properties:{
			itemArray:Array	
			},
		changeArray:function(){
			this.itemArray=<<Some new Array>>
             this.fire('eventPerformed',newArray);


		}
	});

</script>

</dom-module>

Is there any way I can call the template repeat with the new array in the same child page? Or do I have to fire an event to the parent-page and call the child page again? How to achieve it either way?

Answer 1

The child-page re-renders its template is="dom-repeat" items="[[itemArray]]" automatically whenever its itemArray property was updated.

Just add notify: true to the itemArray property in child-page to enable two-way-binding with the parent-page element. Then the parent-page is also notified whenever the item-array of child-page has changed (see the Polymer documentation on this topic).

Here is a small complete example:

<dom-module id="child-page">
  <template>
    <template is="dom-repeat" items="[[itemArray]]">
      <div>[[item]]</div>
    </template>
    <div on-click="_changeArray">Change</div>
  </template>
  <script>
    Polymer({
      is: 'child-page',
      properties: {
        itemArray: {type: Array, notify: true}
      },
      _changeArray: function() {
        this.itemArray = [4,5,6,7,8,9];
      }
    })
  </script>
</dom-module>

<dom-module id="parent-page">
  <template>
    <span>Item count: </span><span>[[itemArray.length]]</span>
    <child-page item-array="{{itemArray}}"></child-page>
  </template>
  <script>
    Polymer({
      is: 'parent-page',
      properties: {
        itemArray: {type: Array, value: [1,2,3]}
      }
    })
  </script>
</dom-module>

<parent-page></parent-page>

Btw. note my usage of {{...}} and [[...]]. Use curly braces for two-way bindings and square brackets for one-way bindings.