为什么我的polymer应用程序中的视图没有加载?

我正在使用Polymer Starter工具包为宠物项目创建一个Polymer应用程序,并对其进行修改以添加水平工具栏、背景图像等。到目前为止,除了应用程序工具栏中的链接在我单击时不会更新“视图”外,其他一切都很好。

到目前为止,我的所有调试都指向“page”属性的方向。我认为这没有得到更新或为空,导致视图默认为“about”(根据初学者工具包是view-2),如\u routePageChanged observer方法中指定的。

我尝试在Chrome上的DevTools上使用调试器,但由于我是新手,我不太清楚我是否正确地使用了调试器。我只是不断地进出数百个函数调用。

我正在复制应用程序外壳的相关部分。

请帮助我,或者至少为我指出正确的方向;两天以来我一直在努力解决这个问题。非常感谢。

<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>

这是我单击“主页”链接时的页面快照。

Snapshot of the page