Polymer 聚合物2.0嵌套铁页_Polymer_Web Component_Polymer 2.x_Iron Pages

Polymer 聚合物2.0嵌套铁页

polymer

Polymer 聚合物2.0嵌套铁页,polymer,web-component,polymer-2.x,iron-pages,Polymer,Web Component,Polymer 2.x,Iron Pages,我不太擅长熨斗页面和应用程序路线，所以我会尽力解释这一点我正在构建一个web应用程序，其中内置了两个主要的“应用程序”——常规用户界面和管理仪表板。因此，我自然需要两条不同的主“路径”：/admin和/home 管理仪表板中应该有一个抽屉，我可以从“类别”列表中进行选择，并在选择类别后加载特定视图。示例/admin/users将加载一个视图，该视图将加载用户列表。单击列表页面上的某个项目后，将显示详细信息部分。示例/admin/user/UserA 这是我到目前为止的结构。演示应用程序有铁页面

我不太擅长熨斗页面和应用程序路线，所以我会尽力解释这一点

我正在构建一个web应用程序，其中内置了两个主要的“应用程序”——常规用户界面和管理仪表板。因此，我自然需要两条不同的主“路径”：

/admin

和

/home

管理仪表板中应该有一个抽屉，我可以从“类别”列表中进行选择，并在选择类别后加载特定视图。示例

/admin/users

将加载一个视图，该视图将加载用户列表。单击列表页面上的某个项目后，将显示详细信息部分。示例

/admin/user/UserA

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

我可以进入管理页面，但在从“类别”列表中选择后，该路径将不起作用。我的代码是基于商店演示的

演示应用程序

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

不确定这样做是否正确？我觉得如果我有一个带有3+子例程的url，这会变得非常麻烦

编辑2

在

演示管理

路由器中

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

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

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







子例程：[[子例程]]
类DemoAdmin扩展了Polymer.Element{
静态get是（）{
返回“演示管理员”；
}
静态获取属性（）{
返回{
类别：{
类型：字符串，
reflectToAttribute:true，
观察员：“_categoryChanged”，
},
routeData:对象，
子例程：对象，
};
}
静态获取观察器（）{
返回[
“_RouteCategory已更改（routeData.category）”，
];
}
_路由类别已更改（第页）{
this.page=page | |“defaultPage”；
}
_类别更改（第页）{
const resolvedPageUrl=this.resolveUrl（'demo-'+page+'.html'）；
聚合物进口参考号(
resolvedPageUrl，
无效的
这个。_showPage404.bind（这个），
正确的）；
}
_showPage404（）{
this.page='404'；
}
}
customElements.define（DemoAdmin.is，DemoAdmin）；

在

应用程序路径

中查找更多信息。

感谢您的帮助，不幸的是，它仍然无法工作。我应该在演示应用程序中处理页面更改吗？我无法将我的子页面传播回演示应用程序。示例：/admin/users除了/users更改页面之外什么都不做，而是将页面更改为404。因为在演示应用程序中，我的应用程序路由模式设置为pattern=“/：page”（我想），所以在演示应用程序中，您只需要处理第一个路径组件（即“/admin”），并将其尾部传递给子视图，子视图将解析下一个组件。我更新了答案，因为我认为所有的观察者部分都是理所当然的（可能你已经在

页面的演示应用中使用过了）<代码>路由数据。类别

而不是

类别

将自动更新

铁页

活动视图。另外，您是否懒得加载

演示列表

或其他子视图？我更新为

RoutedData.category

，这似乎解决了404问题，但它没有传播回演示应用程序。我在演示应用程序中有一个观察者：

\u routePageChanged（routeData.page）

，但这只会像您所说的那样查找/admin。我可以在演示管理页面上设置一个观察者吗？我可以观察“类别”，即/管理员/用户-但同样，我必须把这个问题传递回演示应用程序（我想？）愚蠢的问题-在演示应用程序中只观察

路线有多糟糕？谢谢我对答案中的代码示例进行了一点扩展，以展示一个更完整的实现，我在本地尝试了这个实现，看起来效果不错。我还是不明白“返回演示应用程序”是什么意思。当然，如果您愿意，您可以在demo app
中观察任意级别的嵌套路线，尽管将尾部传递给子视图更方便、更模块化。好的。这开始变得更有意义了。我不知道为什么我觉得所有的页面路由都是在演示应用程序中完成的。这就是我所说的“传递回演示应用程序”的意思。我真傻。我相信这是有效的-但现在我有两个页面显示。demo-app
中的iron页面
不会被demo-admin中的页面取代-我提供了一个屏幕截图。
  static get observers() { return [
    '_routePageChanged(routeData.page)',
    '_routeCategoryChanged(subrouteData.category)'
  ]}

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

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

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