Polymer 2.0嵌套铁页-Java 学习之路

我对铁页和app-route不是很了解所以我会尽力解释这个问题 .

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

管理仪表板中应该有一个抽屉，我可以从'categories'列表中选择，并在选择类别时加载特定视图 . 示例 /admin/users 将加载将加载用户列表的视图 . 点击列表页面上的项目后，打开详细信息部分 . 示例 /admin/user/UserA

到目前为止，这是我的结构 . demo-app有铁页，包含HomePage和AdminPage . AdminPage还有包含ListView和DetailView的铁页 .

我可以进入管理页面，但是从“类别”列表中选择后，路线就不会起作用 . 我将我的代码基于Shop Demo

demo-app

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

demo-list

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

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

EDIT 我可能会做点什么......

<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)'
  ]}

不确定这是否是正确的方法？如果我有一个有3个子路由的网址，我觉得这会非常麻烦

EDIT 2
enter image description here

1 回答

在 demo-admin 路由器

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

可能没有按预期工作，因为在 demo-admin 内无法访问 demo-app 的 route 属性 . 此外 patterm="/admin" 是多余的：如果正在加载 demo-admin ，则该网址已经是 /admin .

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

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 的documentation中查找更多信息 .

回复于 2024-05-12T17:17:41+08:00

Polymer 2.0嵌套铁页

1 回答

相关问题