Polymer App Toolbox(日本語) Using the Toolbox/Routing 〜ルーティング〜

目次へ移動

翻訳ドキュメントの管理ページ

ルーティング要素はプレリリースです。 APIが変更される可能性があります。

クライアントサイドにおけるルーティングのために、App Toolboxは、<app-route>要素を使用してモジュラールーティングを提供します。モジュラールーティングとは、アプリケーションのすべてのルートに対して中央リポジトリを用意するのではなく、個々のコンポーネントはルートの一部を管理し、残りを他のコンポーネントに管理を委譲することを意味します。

なぜモジュラールーティングなのですか? <app-route>モジュラールーティングの背景については、Encapsulated routing with elementsを参照してください。

app-routeのインストール

Bowerを使ってapp-routeパッケージをインストールします。:

bower install --save PolymerElements/app-route

2.0リリース候補(RC)の場合は、2.0-previewブランチを使用します。:

bower install --save PolymerElements/app-route#2.0-preview

ルーティングの追加

初めにすべきことは、あなたのアプリのルートがどのように要素にマップされるか決めることです。例えば、いくつかのメインビューを持つアプリケーションがあるとしましょう。:

View Route
User profile view /profile/:user_id
Message list /messages
Message view /detail/:message_id

メインのアプリケーション要素と、タブごとに分割されたビューコンポーネントがあったとします。アプリケーション要素がトップレベルのルートを管理(表示するビューの一つを選択)し、残りのルートの管理をアクティブなビューに委譲します。app要素のテンプレートには次のようなマークアップが含まれるでしょう。:

<!-- app-location binds to the app's URL -->
<app-location route="{{route}}"></app-location>

<!-- this app-route manages the top-level routes -->
<app-route
    route="{{route}}"
    pattern="/:view"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>

<app-location>要素は双方向データバインディングを提供する単なるwindow.locationのプロキシです。一つの<app-location>要素が、トップレベルの<app-route>要素とURLバーのステータスをバインドします。

<app-route>要素は、現在のroutepattern:view部分はパラメータを表します)の照合を行います。パターンに一致すると、ルートはアクティブになり、すべてのURLパラメータがdataオブジェクトに追加されます。今回の例でいうと、パス/profile/tinaはトップレベルのルートと一致し、routeData.viewprofileに設定されます。残りのルート(/tina)がtailになります。

ルートに基づき、アプリは<iron-pages>を使って表示するビューを選択できます:

<!-- iron-pages selects the view based on the active route -->
<iron-pages selected="[[routeData.view]]" attr-for-selected="name">
  <my-profile-view name="profile" route="{{subroute}}"></my-profile-view>
  <my-message-list-view name="messages" route="{{subroute}}"></my-message-list-view>
  <my-detail-view name="detail" route="{{subroute}}"></my-detail-view>
</iron-pages>

仮に、現在のURLが/profile /tinaの場合、ルートが/tinaに設定された<my-profile-view>要素が表示されます。このビューには、ルートを処理のため独自の<app-route>が組み込まれています。例えば、ユーザーデータをロードする場合には:

<app-route
    route="{{route}}"
    pattern="/:user_id"
    data="{{routeData}}"></app-route>
<iron-ajax url="{{_profileUrlForUser(routeData.user_id)}}
           on-response="handleResponse" auto>

Routeオブジェクト

routeオブジェクトには二つのプロパティがあります。:

  • prefix:上位の<app-route>要素でマッチしたパス。トップレベルの<app-route>要素の場合、prefixは常に空の文字列になります。
  • pathrouteオブジェクトが照合しているパス。

tailオブジェクトは、ルート内の次の<app-route>に渡すルートを表すrouteオブジェクトでもあります。

例えば、現在のURLが/users/bob/messagesで、トップレベルの<app-route>のパターンが/users/:userの場合:

routeオブジェクトは、:

{
  prefix: '',
  path: '/users/bob/messages'
}

tailオブジェクトは、:

{
  prefix: '/users/bob',
  path: '/messages'
}

また、routeDataオブジェクトは、:

{
  user: 'bob'
}

ルートの変更

<app-route>を使用した場合、現在のURLを変更するには二つの方法があります。

  • リンク:リンクをクリックすると、<app-location>はナビゲーションイベントをインターセプトし、そのrouteプロパティを更新します。主要なナビゲーションにリンクを使用するのは良い考えです。なぜなら、検索エンジンがインデックスを作成する際にアプリケーションの構造の把握に役立つためです。

  • ルートの更新:routeオブジェクトは読み書き可能なので、双方向データバインディングまたはthis.setを使用してルートを更新できます。 routerouteDataの両方のオブジェクトはこれらの方法で操作できます。例えば:

this.set('route.path', '/search/');

あるいは:

this.set('routeData.user', 'mary');

ルート変更に応じたアクション

前のセクションでは、ルートとそのデータへのデータバインディングを示しましたが、ルートが変化した際に特定のコードを実行する必要があるかもしれません。オブザーバーを使用すれば、ルートやデータの変更に応た処理を行うことが可能です。:

ルートオブザーバーの例

static get observers() {
  return [
    '_routeChanged(route.*)',
    '_viewChanged(routeData.view)'
  ]
}

_routeChanged(changeRecord) {
  if (changeRecord.path === 'path') {
    console.log('Path changed!');
  }
}
_viewChanged(view) {
  // load data for view
}

参考情報

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.