third_party/polymer/v1_0/components-chromium/app-route/app-location.html - Issue 2357093002: Polymer WebUI: Remove app-route from Polymer components

Side by Side Diff: third_party/polymer/v1_0/components-chromium/app-route/app-location.html

Issue 2357093002: Polymer WebUI: Remove app-route from Polymer components (Closed)

Patch Set: Rebase Created 4 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

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 <link rel="import" href="../iron-location/iron-location.html">

11 <link rel="import" href="../iron-location/iron-query-params.html">

12 <link rel="import" href="app-route-converter-behavior.html">

13

14 <!--

15 `app-location` is an element that provides synchronization between the

16 browser location bar and the state of an app. When created, `app-location`

17 elements will automatically watch the global location for changes. As changes

18 occur, `app-location` produces and updates an object called `route`. This

19 `route` object is suitable for passing into a `app-route`, and other similar

20 elements.

21

22 An example of the public API of a route object that describes the URL

23 `https://elements.polymer-project.org/elements/app-route-converter?foo=bar&baz=q ux`:

24

25 {

26 prefix: '',

27 path: '/elements/app-route-converter'

28 }

29

30 Example Usage:

31

32 <app-location route="{{route}}"></app-location>

33 <app-route route="{{route}}" pattern="/:page" data="{{data}}"></app-route>

34

35 As you can see above, the `app-location` element produces a `route` and that

36 property is then bound into the `app-route` element. The bindings are two-

37 directional, so when changes to the `route` object occur within `app-route`,

38 they automatically reflect back to the global location.

39

40 ### Hashes vs Paths

41

42 By default `app-location` routes using the pathname portion of the URL. This has

43 broad browser support but it does require cooperation of the backend server. An

44 `app-location` can be configured to use the hash part of a URL instead using

45 the `use-hash-as-path` attribute, like so:

46

47 <app-location route="{{route}}" use-hash-as-path></app-location>

48

49 ### Integrating with other routing code

50

51 There is no standard event that is fired when window.location is modified.

52 `app-location` fires a `location-changed` event on `window` when it updates the

53 location. It also listens for that same event, and re-reads the URL when it's

54 fired. This makes it very easy to interop with other routing code.

55

56 @element app-location

57 @demo demo/index.html

58 -->

59 </head><body><dom-module id="app-location">

60 <template>

61 <iron-location path="{{__path}}" query="{{__query}}" hash="{{__hash}}" url-s pace-regex="{{urlSpaceRegex}}">

62 </iron-location>

63 <iron-query-params params-string="{{__query}}" params-object="{{queryParams} }">

64 </iron-query-params>

65 </template>

66 </dom-module>

67 <script src="app-location-extracted.js"></script></body></html>

OLD	NEW