Question

我正在为宠物项目创建一个Polymer应用程序，使用Polymer Starter Kit，并修改它以添加水平工具栏，背景图像等。到目前为止，除应用程序工具栏中的链接外，一切都运行正常点击它们时不要更新“视图”。

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

我尝试在Chrome上的DevTools上使用调试器，但对此我不熟悉，我不是很清楚我是否正确使用它。我只是继续进出一百个函数调用。

我正在复制app-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>

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

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

老实说，我仍在努力寻找更好的解决方案。因为我有用户页面，我无法在谷歌搜索结果中编制索引。这只会保持同步铁页和地址链接。

为什么我的聚合物应用中的视图没有被加载？

1 个答案: