Nested iron-page with selected attribute

Question

I am using the iron-page element but in nested way. Example:

In file 0-0.html:

<iron-page>
  <1-0></1-0>
  <2-0></2-0>
</iron-page>

In file 1-0.html:

<iron-page>
  <1-1></1-1>
  <1-2></1-2>
  <1-3></1-3>
</iron-page>

In file 2-0.html:

<iron-page>
  <2-1></2-1>
  <2-2></2-2>
  <2-3></2-3>
</iron-page>

I need to know when one of the element from <1-1> to <2-3> (let call them son element) are shown. To do that I used the selectedAttribute property but my problem is:

Why when a mother iron-page element is disabled, he keep one item as selected? What i want to do finally is to get notified when an iron-page son element is displayed or hidden. Do someone can help me?

Thanks

Answer 1

Everything about propagation can be done by binding. So something like

<iron-pages>
  <1-0 selected="{{selectedOne}}"></1-0>
  <2-0 selected="{{selectedTwo}}"></2-0>
</iron-pages>

inside son elements you define property: selected. and set them notify: true. Notify means that whenever this property changes, parent element property binded to this value will update automatically.

properties: { selected: { value: null, notify: true } }

inside son elements your iron-pages must have binding to selected property. Like:

<iron-pages selected="{{selected}}">

and that's it. Whenever selected property changes (inside son elements), parent element will automatically reload his selectedOne and selectedTwo properties.

You can also add observer to selectedOne and selectedTwo properties, which will call some function so you know exactly when to do some logic.

so in mother element:

properties: {
  selectedOne: {
    value: null,
    observer: "_selectedOneChanged"
  },
  selectedTwo: {
    value: null,
    observer: "_selectedTwoChanged"
  }
}

Another solution

Solution above is good but in more nested elements it's almost impossible to make it work and it's really messy. So another way would be event listener. Polymer has fire method which is really great to know. More info you can find in documentation.

Briefly:

in son element you do something like

this.fire("iron-pages-changed", {page: this.selected});

and mother element:

ready: function() {
  this.addEventListener("iron-pages-changed", function() {
    ... some logic ...
  }
}