Google Polymer - Iron Pages/Selector not updating main field

Question

I'm cutting my teeth with Google Polymer by trying to put together a control panel style layout but unfortunately when clicking on items in my app-drawer the content doesn't load in the main field. The url updates in the bar and the CSS highlights the selection but nothing else happens.

I started with a blank app template using polymer init, tried to flesh out the structure by referencing this answer, and then referenced the starter-kit as a guide for the rest. If anyone could give me a nudge in the right direction it would be greatly appreciated as i'm still new to the concepts of routing.

<dom-module id="Panel-app">
  <template>
    <style>

      :host {
        display: block;
        font-family: Fira Sans Condensed;
        --app-primary-color: #1A3663;
      }

      app-header {
        background-color: var(--app-primary-color);
        color: white;
      }

      app-drawer {
        top: 64px;
        --app-drawer-content-container: {
          padding: 0px;
          background-color: #325999;
        };
      }

      .drawer-list {
        margin: 0 20px;
      }

      .drawer-list a {
        display: block;
        padding: 0 16px;
        text-decoration: none;
        color: var(--app-secondary-color);
        line-height: 40px;
      }

      .drawer-list a.iron-selected {
        color: black;
        font-weight: bold;
      }
    </style>


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


<app-header-layout fullbleed>
  <app-header shadow>
    <app-toolbar id="toolbar">
      <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
      <div main-title>Panel</div>

      <paper-menu-button>
        <paper-icon-button icon="communication:live-help" class="dropdown-trigger"></paper-icon-button>
        <paper-menu class="dropdown-content">
          <paper-item>Live Chat</paper-item>
          <paper-item>Contact List</paper-item>
          <paper-item>Leave Feedback</paper-item>
        </paper-menu>
      </paper-menu-button>


        <paper-icon-button icon="supervisor-account" class="dropdown-trigger"></paper-icon-button>
        <paper-icon-button icon="settings" class="dropdown-trigger"></paper-icon-button>


    </app-toolbar>
  </app-header>

  <app-drawer-layout>
    <app-drawer id="drawer">
      <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
        <a name="view1" href="/view1">One</a>
        <a name="view2" href="/view2">Two</a>
        <a name="view3" href="/view3">Three</a>
      </iron-selector>
    </app-drawer>


    <iron-pages
        selected="[[page]]"
        attr-for-selected="name"
        fallback-selection="view404"
        role="main">
      <my-view1 name="view1"></my-view1>
      <my-view2 name="view2"></my-view2>
      <my-view3 name="view3"></my-view3>
    </iron-pages>

  </app-drawer-layout>
</app-header-layout>
</template>


  <script>

    Polymer({
      is: 'Panel-app',

      properties: {
        page: {
          type: String,
          reflectToAttribute: true,
          observer: '_pageChanged',
        },
      },

      observers: [
        '_routePageChanged(routeData.page)',
      ],

      _routePageChanged: function(page) {
        this.page = page || 'view1';

        if (!this.$.drawer.persistent) {
          this.$.drawer.close();
        }
      },

      _pageChanged: function(page) {
        // Load page import on demand. Show 404 page if fails
        var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
        this.importHref(resolvedPageUrl, null, this._showPage404, true);
      },

      _showPage404: function() {
        this.page = 'view404';
      },
    });
  </script>
</dom-module>

Answer 1

You're missing a curly bracket here or else the binding fails:

route="{{route}"

It must be

route="{{route}}"

Then the _routePageChanged observer works