OLD | NEW |
1 | 1 |
2 <!--- | 2 <!--- |
3 | 3 |
4 This README is automatically generated from the comments in these files: | 4 This README is automatically generated from the comments in these files: |
5 app-location.html app-route-converter-behavior.html app-route-converter.html
app-route.html | 5 app-location.html app-route-converter-behavior.html app-route-converter.html
app-route.html |
6 | 6 |
7 Edit those files, and our readme bot will duplicate them over here! | 7 Edit those files, and our readme bot will duplicate them over here! |
8 Edit this file, and the bot will squash your changes :) | 8 Edit this file, and the bot will squash your changes :) |
9 | 9 |
10 The bot does some handling of markdown. Please file a bug if it does the wrong | 10 The bot does some handling of markdown. Please file a bug if it does the wrong |
11 thing! https://github.com/PolymerLabs/tedium/issues | 11 thing! https://github.com/PolymerLabs/tedium/issues |
12 | 12 |
13 --> | 13 --> |
14 | 14 |
15 [](https://travis-ci.org/PolymerElements/app-route) | 15 [](https://travis-ci.org/PolymerElements/app-route) |
16 | 16 |
17 | 17 |
18 ##<app-route> | 18 ## <app-route> |
19 | 19 |
20 `app-route` is an element that enables declarative, self-describing routing | 20 `app-route` is an element that enables declarative, self-describing routing |
21 for a web app. | 21 for a web app. |
22 | 22 |
23 > *n.b. app-route is still in beta. We expect it will need some changes. We're c
ounting on your feedback!* | 23 > *n.b. app-route is still in beta. We expect it will need some changes. We're c
ounting on your feedback!* |
24 | 24 |
25 In its typical usage, a `app-route` element consumes an object that describes | 25 In its typical usage, a `app-route` element consumes an object that describes |
26 some state about the current route, via the `route` property. It then parses | 26 some state about the current route, via the `route` property. It then parses |
27 that state using the `pattern` property, and produces two artifacts: some `data` | 27 that state using the `pattern` property, and produces two artifacts: some `data` |
28 related to the `route`, and a `tail` that contains the rest of the `route` that | 28 related to the `route`, and a `tail` that contains the rest of the `route` that |
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
82 | 82 |
83 And the `subrouteData` will look like this: `{ id: '123' }` | 83 And the `subrouteData` will look like this: `{ id: '123' }` |
84 | 84 |
85 `app-route` is responsive to bi-directional changes to the `data` objects | 85 `app-route` is responsive to bi-directional changes to the `data` objects |
86 they produce. So, if `routeData.page` changed from `'article'` to `'about'`, | 86 they produce. So, if `routeData.page` changed from `'article'` to `'about'`, |
87 the `app-route` will update `route.path`. This in-turn will update the | 87 the `app-route` will update `route.path`. This in-turn will update the |
88 `app-location`, and cause the global location bar to change its value. | 88 `app-location`, and cause the global location bar to change its value. |
89 | 89 |
90 | 90 |
91 | 91 |
92 ##<app-location> | 92 ## <app-location> |
93 | 93 |
94 `app-location` is an element that provides synchronization between the | 94 `app-location` is an element that provides synchronization between the |
95 browser location bar and the state of an app. When created, `app-location` | 95 browser location bar and the state of an app. When created, `app-location` |
96 elements will automatically watch the global location for changes. As changes | 96 elements will automatically watch the global location for changes. As changes |
97 occur, `app-location` produces and updates an object called `route`. This | 97 occur, `app-location` produces and updates an object called `route`. This |
98 `route` object is suitable for passing into a `app-route`, and other similar | 98 `route` object is suitable for passing into a `app-route`, and other similar |
99 elements. | 99 elements. |
100 | 100 |
101 An example of the public API of a route object that describes the URL | 101 An example of the public API of a route object that describes the URL |
102 `https://elements.polymer-project.org/elements/app-location`: | 102 `https://elements.polymer-project.org/elements/app-location`: |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
142 call `window.location.pushState` or `window.location.replaceState` followed by | 142 call `window.location.pushState` or `window.location.replaceState` followed by |
143 firing a `location-changed` event on `window`. i.e. | 143 firing a `location-changed` event on `window`. i.e. |
144 | 144 |
145 ```javascript | 145 ```javascript |
146 window.history.pushState({}, null, '/new_path'); | 146 window.history.pushState({}, null, '/new_path'); |
147 window.dispatchEvent(new CustomEvent('location-changed')); | 147 window.dispatchEvent(new CustomEvent('location-changed')); |
148 ``` | 148 ``` |
149 | 149 |
150 | 150 |
151 | 151 |
152 ##<app-route-converter> | 152 ## <app-route-converter> |
153 | 153 |
154 `app-route-converter` provides a means to convert a path and query | 154 `app-route-converter` provides a means to convert a path and query |
155 parameters into a route object and vice versa. This produced route object | 155 parameters into a route object and vice versa. This produced route object |
156 is to be fed into route-consuming elements such as `app-route`. | 156 is to be fed into route-consuming elements such as `app-route`. |
157 | 157 |
158 > n.b. This element is intended to be a primitive of the routing system and for | 158 > n.b. This element is intended to be a primitive of the routing system and for |
159 creating bespoke routing solutions from scratch. To simply include routing in | 159 creating bespoke routing solutions from scratch. To simply include routing in |
160 an app, please refer to [app-location](https://github.com/PolymerElements/app-ro
ute/blob/master/app-location.html) | 160 an app, please refer to [app-location](https://github.com/PolymerElements/app-ro
ute/blob/master/app-location.html) |
161 and [app-route](https://github.com/PolymerElements/app-route/blob/master/app-rou
te.html). | 161 and [app-route](https://github.com/PolymerElements/app-route/blob/master/app-rou
te.html). |
162 | 162 |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
200 ``` | 200 ``` |
201 | 201 |
202 This is a simplified implementation of the `app-location` element. Here the | 202 This is a simplified implementation of the `app-location` element. Here the |
203 `iron-location` produces a path and a query, the `iron-query-params` consumes | 203 `iron-location` produces a path and a query, the `iron-query-params` consumes |
204 the query and produces a queryParams object, and the `app-route-converter` | 204 the query and produces a queryParams object, and the `app-route-converter` |
205 consumes the path and the query params and converts it into a route which is in | 205 consumes the path and the query params and converts it into a route which is in |
206 turn is consumed by the `app-route`. | 206 turn is consumed by the `app-route`. |
207 | 207 |
208 | 208 |
209 | 209 |
210 ##Polymer.AppRouteConverterBehavior | 210 ## Polymer.AppRouteConverterBehavior |
211 | 211 |
212 Provides bidirectional mapping between `path` and `queryParams` and a | 212 Provides bidirectional mapping between `path` and `queryParams` and a |
213 app-route compatible `route` object. | 213 app-route compatible `route` object. |
214 | 214 |
215 For more information, see the docs for `app-route-converter`. | 215 For more information, see the docs for `app-route-converter`. |
216 | 216 |
217 | 217 |
OLD | NEW |