| OLD | NEW |
|---|
| 1 <!-- | 1 <!-- |
| 2 @license | 2 @license |
| 3 Copyright (c) 2016 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2016 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --><html><head><link rel="import" href="../polymer/polymer.html"> | 9 --><html><head><link rel="import" href="../polymer/polymer.html"> |
| 10 | 10 |
| 11 <!-- | 11 <!-- |
| 12 `carbon-route` is an element that enables declarative, self-describing routing | 12 `app-route` is an element that enables declarative, self-describing routing |
| 13 for a web app. | 13 for a web app. |
| 14 | 14 |
| 15 > *n.b. carbon-route is still in beta. We expect it will need some changes. We'r
e counting on your feedback!* | 15 > *n.b. app-route is still in beta. We expect it will need some changes. We're c
ounting on your feedback!* |
| 16 | 16 |
| 17 In its typical usage, a `carbon-route` element consumes an object that describes | 17 In its typical usage, a `app-route` element consumes an object that describes |
| 18 some state about the current route, via the `route` property. It then parses | 18 some state about the current route, via the `route` property. It then parses |
| 19 that state using the `pattern` property, and produces two artifacts: some `data` | 19 that state using the `pattern` property, and produces two artifacts: some `data` |
| 20 related to the `route`, and a `tail` that contains the rest of the `route` that | 20 related to the `route`, and a `tail` that contains the rest of the `route` that |
| 21 did not match. | 21 did not match. |
| 22 | 22 |
| 23 Here is a basic example, when used with `carbon-location`: | 23 Here is a basic example, when used with `app-location`: |
| 24 | 24 |
| 25 <carbon-location route="{{route}}"></carbon-location> | 25 <app-location route="{{route}}"></app-location> |
| 26 <carbon-route | 26 <app-route |
| 27 route="{{route}}" | 27 route="{{route}}" |
| 28 pattern="/:page" | 28 pattern="/:page" |
| 29 data="{{data}}" | 29 data="{{data}}" |
| 30 tail="{{tail}}"> | 30 tail="{{tail}}"> |
| 31 </carbon-route> | 31 </app-route> |
| 32 | 32 |
| 33 In the above example, the `carbon-location` produces a `route` value. Then, the | 33 In the above example, the `app-location` produces a `route` value. Then, the |
| 34 `route.path` property is matched by comparing it to the `pattern` property. If | 34 `route.path` property is matched by comparing it to the `pattern` property. If |
| 35 the `pattern` property matches `route.path`, the `carbon-route` will set or upda
te | 35 the `pattern` property matches `route.path`, the `app-route` will set or update |
| 36 its `data` property with an object whose properties correspond to the parameters | 36 its `data` property with an object whose properties correspond to the parameters |
| 37 in `pattern`. So, in the above example, if `route.path` was `'/about'`, the valu
e | 37 in `pattern`. So, in the above example, if `route.path` was `'/about'`, the valu
e |
| 38 of `data` would be `{"page": "about"}`. | 38 of `data` would be `{"page": "about"}`. |
| 39 | 39 |
| 40 The `tail` property represents the remaining part of the route state after the | 40 The `tail` property represents the remaining part of the route state after the |
| 41 `pattern` has been applied to a matching `route`. | 41 `pattern` has been applied to a matching `route`. |
| 42 | 42 |
| 43 Here is another example, where `tail` is used: | 43 Here is another example, where `tail` is used: |
| 44 | 44 |
| 45 <carbon-location route="{{route}}"></carbon-location> | 45 <app-location route="{{route}}"></app-location> |
| 46 <carbon-route | 46 <app-route |
| 47 route="{{route}}" | 47 route="{{route}}" |
| 48 pattern="/:page" | 48 pattern="/:page" |
| 49 data="{{routeData}}" | 49 data="{{routeData}}" |
| 50 tail="{{subroute}}"> | 50 tail="{{subroute}}"> |
| 51 </carbon-route> | 51 </app-route> |
| 52 <carbon-route | 52 <app-route |
| 53 route="{{subroute}}" | 53 route="{{subroute}}" |
| 54 pattern="/:id" | 54 pattern="/:id" |
| 55 data="{{subrouteData}}"> | 55 data="{{subrouteData}}"> |
| 56 </carbon-route> | 56 </app-route> |
| 57 | 57 |
| 58 In the above example, there are two `carbon-route` elements. The first | 58 In the above example, there are two `app-route` elements. The first |
| 59 `carbon-route` consumes a `route`. When the `route` is matched, the first | 59 `app-route` consumes a `route`. When the `route` is matched, the first |
| 60 `carbon-route` also produces `routeData` from its `data`, and `subroute` from | 60 `app-route` also produces `routeData` from its `data`, and `subroute` from |
| 61 its `tail`. The second `carbon-route` consumes the `subroute`, and when it | 61 its `tail`. The second `app-route` consumes the `subroute`, and when it |
| 62 matches, it produces an object called `subrouteData` from its `tail`. | 62 matches, it produces an object called `subrouteData` from its `data`. |
| 63 | 63 |
| 64 So, when `route.path` is `'/about'`, the `routeData` object will look like | 64 So, when `route.path` is `'/about'`, the `routeData` object will look like |
| 65 this: `{ page: 'about' }` | 65 this: `{ page: 'about' }` |
| 66 | 66 |
| 67 And `subrouteData` will be null. However, if `route.path` changes to | 67 And `subrouteData` will be null. However, if `route.path` changes to |
| 68 `'/article/123'`, the `routeData` object will look like this: | 68 `'/article/123'`, the `routeData` object will look like this: |
| 69 `{ page: 'article' }` | 69 `{ page: 'article' }` |
| 70 | 70 |
| 71 And the `subrouteData` will look like this: `{ id: '123' }` | 71 And the `subrouteData` will look like this: `{ id: '123' }` |
| 72 | 72 |
| 73 `carbon-route` is responsive to bi-directional changes to the `data` objects | 73 `app-route` is responsive to bi-directional changes to the `data` objects |
| 74 they produce. So, if `routeData.page` changed from `'article'` to `'about'`, | 74 they produce. So, if `routeData.page` changed from `'article'` to `'about'`, |
| 75 the `carbon-route` will update `route.path`. This in-turn will update the | 75 the `app-route` will update `route.path`. This in-turn will update the |
| 76 `carbon-location`, and cause the global location bar to change its value. | 76 `app-location`, and cause the global location bar to change its value. |
| 77 | 77 |
| 78 @element carbon-route | 78 @element app-route |
| 79 @demo demo/index.html | 79 @demo demo/index.html |
| 80 --> | 80 --> |
| 81 | 81 |
| 82 </head><body><script src="carbon-route-extracted.js"></script></body></html> | 82 </head><body><script src="app-route-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1984963002:
Roll Polymer elements (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master