Why are the views in my polymer app not getting loaded?

Question

I am working on creating a Polymer app for a pet project, using the Polymer Starter Kit, and modifying it to add horizontal toolbar, background images, etc. So far, everything has worked fine except the links in the app-toolbar do not update the "view" when I click on them.

All my debugging so far points me in the direction of the "page" property. I believe this is not getting updated or is null, causing the view to default to "about" (which is View-2 as per the starter kit) as specified in the _routePageChanged observer method.

I tried using the debugger on DevTools on Chrome, but being new to this, I'm not very clear if I did it correctly. I just kept going in and out of hundred of function calls.

I am copying relevant parts of the app-shell.

Please help or at least point me in the right direction; I've been trying to fix this since 2 days. Thank you!

<app-location
    route="{{route}}">
</app-location>

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

<!-- Main content -->
<app-header-layout has-scrolling-region>

  <app-header slot="header" class="main-header" condenses effects="waterfall">

  <app-toolbar class="logo"></app-toolbar>

    <app-toolbar class="tabs-bar" hidden$="{{!wideLayout}}">
       <paper-tabs selected="[[selected]]" attr-for-selected="name">
          <paper-tab><a href="[[rootPath]]home">Home</a></paper-tab>
          <paper-tab><a href="[[rootPath]]about">About Us</a></paper-tab>
          <paper-tab><a href="[[rootPath]]pricing">Pricing</a></paper-tab>
       </paper-tabs>
    </app-toolbar>

  </app-header>

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

  </app-header-layout>

</app-drawer-layout>

  <script>
    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }

      static get properties() {
        return {
          page: {
            type: String,
            reflectToAttribute: true,
            observer: '_pageChanged'
          },

         wideLayout: {
           type: Boolean,
           value: false,
           observer: 'onLayoutChange'
         },

         items: {
           type: Array,
           value: function() {
             return ['Home', 'About', 'Pricing', 'Adults', 'Contact'];
           }
         },

          routeData: Object,
          subroute: String,
          // This shouldn't be neccessary, but the Analyzer isn't picking up
          // Polymer.Element#rootPath
          // rootPath: String,
        };
      }

      static get observers() {
        return [
          '_routePageChanged(routeData.page)',
        ];
      }

      _routePageChanged(page) {
        // If no page was found in the route data, page will be an empty string.
        // Default to 'view1' in that case.

        this.page = page || 'about';
        console.log('_routePageChange');


        // Close a non-persistent drawer when the page & route are changed.
        if (!this.$.drawer.persistent) {
          this.$.drawer.close();
        }
      }

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

      _showPage404() {
        this.page = 'view404';
      }

      _onLayoutChange(wide) {
        var drawer = this.$.drawer;

        if (wide && drawer.opened){
          drawer.opened = false;
        }
      }

    }
    window.customElements.define(MyApp.is, MyApp);
  </script>

Here's a snapshot of the page when I click on the "Home" link.

Snapshot of the page

Answer 1

I have fixed the same issue on my app, page observed functions like:

static get properties() { return {
                page:{
                type:String,
                reflectToAttribute:true,
                observer: '_pageChanged'},

...

_pageChanged(page, oldPage) {
  if (page != null) {
      if (page === "home" ) {
          this.set('routeData.page', "");
      } else {
          this.set('routeData.page', page);
      }
  .......
  }
 }

Honestly, I am still trying to find the better solution. Because I have users page and I could not manage to able to indexed at google search results. This only keeps synchronized the iron-pages and address link.