为什么我的 Polymer 应用程序中的视图未加载？

Question

我正在为宠物项目创建一个 Polymer 应用程序，使用 Polymer Starter Kit，并修改它以添加水平工具栏、背景图像等。到目前为止，除了 [=31=当我点击它们时，应用程序工具栏中的 ]s 不会更新 "view"。

到目前为止，我所有的调试都指向 "page" 属性的方向。我相信这没有得到更新或为空，导致视图默认为 _routePageChanged 观察者方法中指定的 "about"（根据入门工具包，它是 View-2）。

我尝试在 Chrome 上使用 DevTools 上的调试器，但作为新手，我不太清楚我是否正确使用。我一直进出数百个函数调用。

我正在复制应用程序的相关部分-shell。

请帮助或至少为我指明正确的方向；自 2 天以来，我一直在尝试解决此问题。谢谢！

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

这是我单击 "Home" link 时的页面快照。

Snapshot of the page

Answer 1

我已经在我的应用程序中解决了同样的问题，页面观察到的功能如下：

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);
      }
  .......
  }
 }

老实说，我仍在努力寻找更好的解决方案。因为我有用户页面，所以我无法在 google 搜索结果中建立索引。这只会使 iron-pages 和地址 link.

保持同步

为什么我的 Polymer 应用程序中的视图未加载？

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

polymer-2.x

polymer-starter-kit