Nested iron-pages (Polymer1.0)

Question

<iron-pages attr-for-selected="data-route" selected="{{route}}">
    <section data-route="home">
        <paper-material elevation="1">
            <bortini-home></bortini-home>
        </paper-material>
    </section>

    <section data-route="tv">
        <paper-material elevation="1">
            <iron-pages attr-for-selected="data-route" selected="{{route}}">
                <section data-route="tvList">
                    <paper-material elevation="1">TV list</paper-material>
                </section>
                <section data-route="tvAdd">
                    <paper-material elevation="1">TV Add</paper-material>
                </section>
                <section data-route="tvEdit">
                    <paper-material elevation="1">TV edit</paper-material>
                </section>
                <section data-route="tvView">
                    <paper-material elevation="1">TV details</paper-material>
                </section>
            </iron-pages>
        </paper-material>
    </section>

    <section data-route="users">
        <paper-material elevation="1">
            <h2 class="paper-font-display2">Users</h2>

            <p>This is the users section</p>
            <a href="/users/Rob">Rob</a>
        </paper-material>
    </section>

    <section data-route="user-info">
        <paper-material elevation="1">
            <h2 class="paper-font-display2">
                User:<span>{{params.name}}</span>
            </h2>

            <div>This is <span>{{params.name}}</span>'s section</div>
        </paper-material>
    </section>

    <section data-route="contact">
        <paper-material elevation="1">
            <h2 class="paper-font-display2">Contact</h2>

            <p>This is the contact section</p>
        </paper-material>
    </section>

</iron-pages>

Also my route looks like -

window.addEventListener('WebComponentsReady', function () {

    // We use Page.js for routing. This is a Micro
    // client-side router inspired by the Express router
    // More info: https://visionmedia.github.io/page.js/
    page('/', function () {
        app.route = 'home';
    });

    page('/tv', function () {
        app.route = 'tvAdd';
    });

    page('/tvAdd', function () {
        app.route = 'tvAdd';

    });

    page('/users', function () {
        app.route = 'users';
    });

    page('/users/:name', function (data) {
        app.route = 'user-info';
        app.params = data.params;
    });

    page('/contact', function () {
        app.route = 'contact';
    });

    // add #! before urls
    page({
        hashbang : true
    });

});

I am using "page.js" for routing.

When I press "tv" menu, it should show "tvAdd", but it just shows empty screen.

Thanks in advance.

Answer 1

The reason this is happening is because the two <iron-pages> elements are both bound to the same property. To elaborate further, here's an example:

1. route changes to tv
2. The parent <iron-pages> element has its selected property changed to tv
3. The tv page is selected in the parent <iron-pages>
4. The child <iron-pages> has its selected property changed to tv
5. There is no tv page in the child <iron-pages>, so nothing is selected inside it and it remains blank.

The same goes for if you were to set route to one of the route names that you use in the child <iron-pages>.

To solve this problem, you must bind both of the <iron-pages> to different properties, the first of which would determine which parent route you are on, and the second of which would determine the child route, if any.

Afterwards, you would just set two properties in your routing callbacks.

Some pseudocode:

<iron-pages attr-for-selected="data-route" selected="{{route}}">
  ...
  <section data-route="tv">
    ...
    <iron-pages attr-for-selected="data-route" selected="{{childRoute}}">
      ...
      <section data-route="tvList">

page('/tvAdd', function () {
  app.route = 'tv';
  app.childRoute = 'tvAdd';
});