Полимерные 2.0 вложенные железные страницы

Question

Я не очень хорош с железными страницами и app-route, поэтому я постараюсь объяснить это как можно лучше.

Я создаю веб-приложение с двумя основными "приложениями", встроенными в него.- обычный пользовательский интерфейс и панель администратора.Поэтому, естественно, я бы хотел два разных основных «пути»: /admin и /home

Панель администратора должна иметь ящик, в котором я могу выбирать из списка «категорий» и после выбораКатегория, загрузить определенный вид.Пример /admin/users загрузит представление, которое загрузит список пользователей.И после нажатия на элемент на странице списка, откройте раздел подробностей.Пример /admin/user/UserA

Вот моя структура до сих пор.У демо-приложения есть железные страницы, которые содержат HomePage и AdminPage.AdminPage также имеет железные страницы, которые содержат ListView и DetailView.

Я могу попасть на страницу администратора, но после выбора из списка «категорий» маршрут не выбирается.Я основываю свой код на демоверсии магазина

демо-приложение

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

demo-admin

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

, вероятно, не работает должным образом, поскольку свойство route demo-app недоступно внутри demo-admin.Также patterm="/admin" является избыточным: если загружается demo-admin, то URL уже /admin.

. Вы можете передать свойство subroute demo-app дочерним представлениям, которым необходимо проанализировать под маршруты:

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

demo-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 документации .