Polymer 2.0 嵌套铁页

Question

我不太擅长 iron-pages 和 app-route，所以我会尽力解释这一点。

我正在构建一个 Web 应用程序，其中内置了两个主要 "apps" - 常规用户界面和管理仪表板。所以我自然会想要两个不同的主 'paths'：/admin 和 /home

管理仪表板中应该有一个抽屉，我可以从 'categories' 列表中 select 并在 select 分类后加载特定视图。示例 /admin/users 将加载一个将加载用户列表的视图。单击列表页面上的项目后，会弹出一个详细信息部分。示例 /admin/user/UserA

到目前为止，这是我的结构。演示应用程序具有包含主页和管理页面的铁页。 AdminPage 也有包含 ListView 和 DetailView 的铁页。

我可以进入管理页面，但是在从 'categories' 的列表中 select 时，路由没有启动。我的代码基于商店演示

演示应用程序

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

<iron-media-query query="max-width: 767px" query-matches="{{smallScreen}}"></iron-media-query>

<app-header role="navigation" id="header" effects="waterfall" condenses reveals>
  <app-toolbar>
  </app-toolbar>
</app-header>

<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
  <!-- home view -->
  <demo-home name="home"></demo-home>

  <!-- admin view -->
  <demo-admin name="admin"></demo-admin>

  <shop-404-warning name="404"></shop-404-warning>
</iron-pages>

演示管理员

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

    <h1>Admin</h1>
    <ul>
      <li><a href="/admin/users">Users</a></li>
      <li><a href="/admin/bars">Bars</a></li>
      <li><a href="/admin/stepsheets">Stepsheets</a></li>
      <li><a href="/admin/events">Events</a></li>
    </ul>

    <p>subroute: [[subroute]]</p>

    <iron-pages role="main" selected="{{subroute.path}}" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
      <demo-list name="list" route="{{subroute}}"></demo-list>
    </iron-pages>
  </template>

演示列表

<app-route
    route="[[route]]"
    pattern="/admin/:collection"
    data="{{routeData}}"></app-route>

<h1>Collection: [[routeData.collection]]</h1>

编辑我可能正在做某事...

<app-location route="{{route}}"></app-location>
<app-route
    route="{{route}}"
    pattern="/:page"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>
<app-route
    route="{{subroute}}"
    pattern="/:category"
    data="{{subrouteData}}"></app-route>

然后

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

不确定这样做是否正确？我觉得如果我有一个 url 和 3+ 子路由

会变得非常麻烦

编辑 2

Answer 1

在demo-admin路由器

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

可能没有按预期工作，因为 demo-app 的 route 属性在 demo-admin 中不可访问。另外 patterm="/admin" 是多余的：如果正在加载 demo-admin 那么 url 已经是 /admin.

可以将demo-app的subroute属性传递给需要解析子路由的子视图：

演示-app.html

<dom-module id="demo-app">
  <template>
    <app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}">
    </app-route>

    <iron-media-query query="max-width: 767px" query-matches="{{smallScreen}}"></iron-media-query>

    <app-header role="navigation" id="header" effects="waterfall" condenses reveals>
      <app-toolbar>
      </app-toolbar>
    </app-header>

    <iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
      <demo-home name="home"></demo-home>
      <demo-admin name="admin" route="{{subroute}}"></demo-admin>
      <shop-404-warning name="404"></shop-404-warning>
    </iron-pages>
  </template>
  <script>
    class DemoApp extends Polymer.Element {

      static get is() {
        return "demo-app";
      }

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

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

      _routePageChanged(page) {
        this.page = page || 'demo-home';
      }

      // Use this only if you want to lazy load pages
      _pageChanged(page) {
        const resolvedPageUrl = this.resolveUrl('demo-' + page + '.html');
        Polymer.importHref(
          resolvedPageUrl,
          null,
          this._showPage404.bind(this),
          true);
      }

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

    }
    customElements.define(DemoApp.is, DemoApp);
  </script>
</dom-module>

演示-admin.html

<dom-module id="demo-admin">
  <template>
    <app-route
      route="{{route}}"
      pattern="/:category"
      data="{{routeData}}"
      tail="{{subroute}}">
    </app-route>

    <h1>Admin</h1>

    <ul>
      <li><a href="/admin/users">Users</a></li>
      <li><a href="/admin/bars">Bars</a></li>
      <li><a href="/admin/stepsheets">Stepsheets</a></li>
      <li><a href="/admin/events">Events</a></li>
    </ul>

    <p>subroute: [[subroute]]</p>

    <iron-pages
      role="main"selected="[[category]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
      <demo-list name="list" route="{{subroute}}"></demo-list>
      <!-- Other pages -->
    </iron-pages>
  </template>
  <script>
    class DemoAdmin extends Polymer.Element {

      static get is() {
        return "demo-admin";
      }

      static get properties() {
        return {
          category: {
            type: String,
            reflectToAttribute: true,
            observer: '_categoryChanged',
          },
          routeData: Object,
          subroute: Object,
        };
      }

      static get observers() {
        return [
          '_routeCategoryChanged(routeData.category)',
        ];
      }

      _routeCategoryChanged(page) {
        this.page = page || 'defaultPage';
      }

      _categoryChanged(page) {
        const resolvedPageUrl = this.resolveUrl('demo-' + page + '.html');
        Polymer.importHref(
          resolvedPageUrl,
          null,
          this._showPage404.bind(this),
          true);
      }

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

    }
    customElements.define(DemoAdmin.is, DemoAdmin);
  </script>
</dom-module>

在 app-route 的 documentation 中查找更多信息。

Polymer 2.0 嵌套铁页

Polymer 2.0 nested iron-pages

web-component

polymer

polymer-2.x

iron-pages