Polymer 1.0: iron-pages not switching pages with children events

Question

I have a parent component with two children components in an "iron-pages" component. The parent should switch pages when it receives an event from one of the children. The problem is, when the event arrives at the parent component, it executes the code to switch children but nothing happens. But, if the code is executed on the parent component itself, then it works.

My question is: Why the parent component is unable to switch pages when a child sends an event?

Below is the code for the two child components:

// this is "child-comm.html"
<link rel="import"
      href="bower_components/polymer/polymer.html">

<dom-module id="child-comm">
    <style>
        div {
        width: 300px;
        height: 300px;
        background-color: #CCC;
        }
    </style>
    <template>
        <div>I'm child 0!</div>
    </template>
</dom-module>

<script>
 Polymer({
     is: "child-comm",
     listeners: {
         'tap': 'doTap'
     },
     doTap: function() {
         this.fire("taped-child")
     }
 });
</script>

and the other child:

this is "child-comm2.html"
<link rel="import"
      href="bower_components/polymer/polymer.html">


<dom-module id="child-comm2">
    <style>
        div {
        width: 300px;
        height: 300px;
        background-color: #C00;
        }
    </style>
    <template>
        <div>I'm child 2!</div>
    </template>
</dom-module>

<script>
 Polymer({
     is: "child-comm2",
     listeners: {
         'tap': 'doTap'
     },
     doTap: function() {
         this.fire("taped-child")
     }
 });
</script>

and then we have the parent component:

<link rel="import"
      href="bower_components/polymer/polymer.html">
<link rel="import"
      href="child-comm.html">
<link rel="import"
      href="child-comm2.html">
<link rel="import"
      href="bower_components/iron-pages/iron-pages.html">

<dom-module is="parent-comm">
    <template>
        <iron-pages selected="0">
            <child-comm on-taped-child="switchPages"></child-comm>
            <child-comm2 on-taped-child="switchPages"></child-comm2>
        </iron-pages>
    </template>
</dom-module>

<script>
 Polymer({
     is: "parent-comm",
     switchPages: function(e) {
         this.pages.selectNext(); // this will not work if the event is created in a child component
         console.log(this.pages); // this will print the correct node on console even when being fired by a child custom event
     },
     ready: function() {
         this.pages = document.querySelector('iron-pages');
         this.switchPages(); // this will switch pages correctly
         console.log(this.pages);
     }
 });
</script>

Thank you...

Answer 1

A quick hack to solve this particular problem is to intercept the child event on the parent node, but not let it call the method to switch pages, instead, call the method asynchronous. Below is the working code for the parent node:

<dom-module is="parent-comm">
    <template>
        <iron-pages selected="0">
            <child-comm on-taped-child="asyncSwitchPages"></child-comm>
            <child-comm2 on-taped-child="asyncSwitchPages"></child-comm2>
        </iron-pages>
    </template>
</dom-module>
<script>
 Polymer({
     is: "parent-comm",
     switchPages: function() {
         this.pages.selectNext();
     },
     asyncSwitchPages: function(e) {
         this.async(this.switchPages);
     },
     ready: function() {
         this.pages = document.querySelector('iron-pages');
     }
 });
</script>

Note: I'd love to hear "why" I have to do it, so I'll just leave this answer not accepted.

Answer 2

I think you need to listen for the custom event. Try adding the below to parent's ready function.

this.addEventListener('taped-child', function(e) { this.switchPages(); });