Polymer nested app routes are not mapping correctl

Question

I am trying to get some basic routes right. I'm using Polymer 1.5.0 and I'm having problems using nested routes.

I'm using app-route 0.9.2

As this post suggests, Polymer uses a decentralized approach in routing. Therefore I decided to do the following:

<app-route route="{{route}}"
       pattern="/:page"
       data="{{data}}"
       tail="{{tail}}">
</app-route>

  <iron-pages selected="{{data.page}}" attr-for-selected="title" fallback-selection="404">
      <pgarena-home-app title="" route="{{tail}}" ></pgarena-home-app>
      <pgarena-tournament-app title="tournament" route="{{tail}}"></pgarena-tournament-app>
      <pgarena-account-app title="account" route="{{tail}}"></pgarena-account-app>
      <div title="404">
          <h1>{{data.page}} could not be found!</h1>
      </div>
  </iron-pages> 

Subpages:

pgarena-account-app

<iron-pages selected="{{data.action}}" attr-for-selected="title" fallback-selection="404">
            <pgarena-account-index-view title=""></pgarena-account-index-view>
            <pgarena-account-login-view title="login"></pgarena-account-login-view>
            <pgarena-account-register-view title="register"></pgarena-account-register-view>
            <div title="404">
                <h1>Not found :(</h1>
            </div>
        </iron-pages>

pgarena-tournament-app

<!-- Chooses the new tournament page. -->
      <app-route 
        route="{{route}}"
        pattern="/:action"
        data="{{data}}"
        tail="{{tail}}"
        >
        </app-route>

    <iron-pages selected="{{data.action}}" attr-for-selected="title" fallback-selection="404">
        <pgarena-tournament-index-view title=""></pgarena-tournament-index-view>    
        <!-- The list of all the tournaments -->    
        <pgarena-tournament-list-view title="list"></pgarena-tournament-list-view>
        <div title="404">
            <h1>Not Found!</h1>
        </div>
    </iron-pages>

Everything seems ok, right? According to the URL What I'm doing here is taking advantage of Lazy Load of elements.

I've seen in the Polycasts examples that they use the "hidden" approach. In which they select the element. The problem is that we lose the "Lazy Loading Advantage".

What could be wrong?

Answer 1

OMG! I totally forgot. In Polycasts #46/47 Rob Dodson makes the strong emphasis that when using iron-selector, we should pass one-way binding which is with the square brackets [] versus the curly brackets {}

So at the end of the day it should have been:

<iron-pages selected="[[data.action]]"

Instead of:

<iron-pages selected="{{data.action}}"