| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- | |
| 2 @license | |
| 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 | |
| 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 | |
| 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 | |
| 9 --><html><head><link rel="import" href="../polymer/polymer.html"> | |
| 10 | |
| 11 <!-- | |
| 12 `carbon-route` is an element that enables declarative, self-describing routing | |
| 13 for a web app. | |
| 14 | |
| 15 > *n.b. carbon-route is still in beta. We expect it will need some changes. We'r
e counting on your feedback!* | |
| 16 | |
| 17 In its typical usage, a `carbon-route` element consumes an object that describes | |
| 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` | |
| 20 related to the `route`, and a `tail` that contains the rest of the `route` that | |
| 21 did not match. | |
| 22 | |
| 23 Here is a basic example, when used with `carbon-location`: | |
| 24 | |
| 25 <carbon-location route="{{route}}"></carbon-location> | |
| 26 <carbon-route | |
| 27 route="{{route}}" | |
| 28 pattern="/:page" | |
| 29 data="{{data}}" | |
| 30 tail="{{tail}}"> | |
| 31 </carbon-route> | |
| 32 | |
| 33 In the above example, the `carbon-location` produces a `route` value. Then, the | |
| 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 | |
| 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 | |
| 38 of `data` would be `{"page": "about"}`. | |
| 39 | |
| 40 The `tail` property represents the remaining part of the route state after the | |
| 41 `pattern` has been applied to a matching `route`. | |
| 42 | |
| 43 Here is another example, where `tail` is used: | |
| 44 | |
| 45 <carbon-location route="{{route}}"></carbon-location> | |
| 46 <carbon-route | |
| 47 route="{{route}}" | |
| 48 pattern="/:page" | |
| 49 data="{{routeData}}" | |
| 50 tail="{{subroute}}"> | |
| 51 </carbon-route> | |
| 52 <carbon-route | |
| 53 route="{{subroute}}" | |
| 54 pattern="/:id" | |
| 55 data="{{subrouteData}}"> | |
| 56 </carbon-route> | |
| 57 | |
| 58 In the above example, there are two `carbon-route` elements. The first | |
| 59 `carbon-route` consumes a `route`. When the `route` is matched, the first | |
| 60 `carbon-route` also produces `routeData` from its `data`, and `subroute` from | |
| 61 its `tail`. The second `carbon-route` consumes the `subroute`, and when it | |
| 62 matches, it produces an object called `subrouteData` from its `tail`. | |
| 63 | |
| 64 So, when `route.path` is `'/about'`, the `routeData` object will look like | |
| 65 this: `{ page: 'about' }` | |
| 66 | |
| 67 And `subrouteData` will be null. However, if `route.path` changes to | |
| 68 `'/article/123'`, the `routeData` object will look like this: | |
| 69 `{ page: 'article' }` | |
| 70 | |
| 71 And the `subrouteData` will look like this: `{ id: '123' }` | |
| 72 | |
| 73 `carbon-route` is responsive to bi-directional changes to the `data` objects | |
| 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 | |
| 76 `carbon-location`, and cause the global location bar to change its value. | |
| 77 | |
| 78 @element carbon-route | |
| 79 @demo demo/index.html | |
| 80 --> | |
| 81 | |
| 82 </head><body><script src="carbon-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