| 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 1862213002:
Roll third_party/polymer. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master