Question

我通过尝试将控制面板样式布局放在一起来使用Google聚合物切割牙齿，但不幸的是，当点击我的应用程序抽屉中的项目时，内容不会在主要字段中加载。栏中的网址更新和CSS突出显示选择，但没有其他事情发生。

我使用polymer init开始使用空白的应用模板，试图通过引用this answer来充实结构，然后引用入门套件作为其余部分的指南。如果有人能给我一个正确方向的推动，我将非常感激，因为我对路由的概念还不熟悉。

<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

你在这里错过了一个花括号，否则绑定失败了：

route="{{route}"

一定是

route="{{route}}"

然后_routePageChanged观察者工作

Google Polymer - Iron Pages / Selector不更新主要字段

1 个答案: