app-router

├── .gitignore ├── .github └── ISSUE_TEMPLATE.md ├── index.html ├── demo ├── data-loading-demo.html ├── youtube-demo │ ├── route-info.html │ ├── search-results.html │ ├── youtube-search.html │ ├── video-viewer.html │ ├── youtube-toolbar.html │ └── youtube-lite.html ├── data-loading-demo │ ├── flickr-search-demo.html │ ├── flickr-image-page.html │ └── flickr-search-page.html ├── simple-demo.html └── index.html ├── test ├── index.html ├── redirection.html ├── observer-tester.html ├── app-example-1.html ├── app-route-converter.html ├── test-observer-app.html ├── test-app-example-1.html ├── app-location.html └── app-route.html ├── .travis.yml ├── bower.json ├── app-route-converter.html ├── CONTRIBUTING.md ├── app-route-converter-behavior.html ├── app-location.html ├── README.md └── app-route.html /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components* 2 | bower-*.json -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | ### Description 3 | 4 | 5 | ### Expected outcome 6 | 7 | 8 | 9 | ### Actual outcome 10 | 11 | 12 | 13 | ### Live Demo 14 | 15 | 16 | ### Steps to reproduce 17 | 18 | 23 | 24 | ### Browsers Affected 25 | 26 | - [ ] Chrome 27 | - [ ] Firefox 28 | - [ ] Safari 9 29 | - [ ] Safari 8 30 | - [ ] Safari 7 31 | - [ ] Edge 32 | - [ ] IE 11 33 | - [ ] IE 10 34 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | app-router 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /demo/data-loading-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | carbon-route data loading example 18 | 19 | 20 | 21 | 22 | 23 | 24 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /test/redirection.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 19 | 20 | 21 | 27 | 44 | 45 | -------------------------------------------------------------------------------- /test/observer-tester.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 24 | 47 | 48 | -------------------------------------------------------------------------------- /demo/youtube-demo/route-info.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 27 | 48 | 49 | -------------------------------------------------------------------------------- /test/app-example-1.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 25 | 45 | 46 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: stable 3 | addons: 4 | firefox: latest 5 | apt: 6 | sources: 7 | - google-chrome 8 | packages: 9 | - google-chrome-stable 10 | before_script: 11 | - npm install -g polymer-cli 12 | - polymer install --variants 13 | script: 14 | - xvfb-run polymer test 15 | - >- 16 | if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default'; 17 | fi 18 | env: 19 | global: 20 | - secure: >- 21 | WdFRmsbFi5zjdD/yaGR0HITPFsjSWeVYj8JcLE95nUN0fkkJuNh/A0/cDHDcDpxzY4xCNdc/IwPTtE4+awCGavot71OXlpEYD8aZUdVw9VcYVTc1IG2B/hgFcdYhXHYOLbs7JlOA/H6/RSiOensRv7QESNY2cMGzRsccav9jdAbLJqHNPI5orMRBT6/H5roZvXXEn5XmIemjCMwtGlqUeRd3nHM2n0PsQKETb+8Y04fTFuqggSEVt/SgU/UdNNm2T2mVFUDWChvjAM36l4FvgUKZm8gh2CYrXc0rHOVt7BCJN5OzZSwCmxxauhUe+7QOgZO3UE5l+M+MX9CjnSdy/HJRauMJy2eCSr9RDoChPKZOC14QrZff06L9WhDnVEHkz8PN2mwP73/uDVYyJC9Szs+4MSKK+WEIIiywEnxCp2Nq9eBNoWNDySOaud+9WxLosh01bTvytVZrd3Lqkf3MUm2sJ+v17e4JagW13zwBXjxnLP1V+H+IP/imrRRV9x5gdvK+9iL3ZYsIQmcEkqNlWrqHe3eZTgpkc/HhewfZCu49ClM6pnoJiC/7/YM3CarwkfMhGJKDU5iXfJiQABIfZ3XhTKG7nltz6VRpm8eFwxInpxNAIBghkz6PGeESHgtmsoQKtGqAg7+cRfjTS9uLMVomYHWPz0brCIQloAjSKc8= 22 | - secure: >- 23 | k6zYpUF0NdxNqVyfCbEztJ25Z229mpcvSdHfkOF8YqFse+1CkSR1M83Dts1K34eK43Yov375YJ/Op/MXEA0wrbnyEDg/AvwqBv5XZTslIvOjA1WvZJDGBiaZ6lvqs6tEhLfB79eZvTHP8DSDlLabklDAPaio1VC+Q6zyLIlsTIr6fH1VK1gX/uHkvSGKl8C9bfeGHgFlXaWmShN+FvLwW4PiRw2MwzXeq/qQqfS0Nn3gtuGN2kNNBpKVJwcDkYDOcJ2+49ojF8RAdbt8hsZkjGq21hpY6eKhbte66guN7lRTKY5+g2aLkg1CrBp9ZHZ4kAlfbhibhiLt/W1UbXUL/nnTFkrotuJ6vdU6gLN0EhjZN3bMAtKqHC+Bl2223ClNMs17iXReSqqOSc9D3gL9b3FYqQElS4bQIa+0L76TbkMM/H6ilQjSIvVnUXLszMIeyliIVpnI0ClTUbqe5Et51urk+KjJrOE95wyxkiL2bzKxcXCLzdvSy0nxwwcu7DnBQPG0Fg6/JVRMHM17PDhjgQLSvKr8wXtO042xzAosoZuDVOHHgpA5v9iKI/xPUseu3utfBT5ZGcyjKKuxI9Dsjoi4Go0B6uQ4rY/XUp+k4aa1Ucg3Ngx8zYgzJlFGiZq7OnG+quSTpZ32hpQqDmtYKNMxf5p/YRhxWSeuBWheLeQ= 24 | dist: trusty 25 | sudo: required 26 | -------------------------------------------------------------------------------- /demo/youtube-demo/search-results.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 52 | 63 | 64 | -------------------------------------------------------------------------------- /test/app-route-converter.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | app-route-converter 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 27 | 28 | 29 | 58 | 59 | -------------------------------------------------------------------------------- /test/test-observer-app.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | app-route 0bserver Test 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 29 | 30 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /demo/data-loading-demo/flickr-search-demo.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 49 | 66 | 67 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app-route", 3 | "version": "2.0.0", 4 | "authors": [ 5 | "The Polymer Authors" 6 | ], 7 | "description": "App routing expressed as Polymer Custom Elements.", 8 | "main": [ 9 | "app-route.html", 10 | "app-location.html", 11 | "app-route-converter.html" 12 | ], 13 | "license": "http://polymer.github.io/LICENSE.txt", 14 | "homepage": "https://github.com/PolymerElements/app-route", 15 | "private": true, 16 | "ignore": [], 17 | "dependencies": { 18 | "iron-location": "PolymerElements/iron-location#1 - 2", 19 | "polymer": "Polymer/polymer#1.9 - 2" 20 | }, 21 | "devDependencies": { 22 | "google-youtube": "GoogleWebComponents/google-youtube#1 - 2", 23 | "iron-component-page": "polymerelements/iron-component-page#1 - 2", 24 | "iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2", 25 | "iron-pages": "PolymerElements/iron-pages#1 - 2", 26 | "iron-test-helpers": "polymerelements/iron-test-helpers#1 - 2", 27 | "paper-card": "PolymerElements/paper-card#1 - 2", 28 | "paper-icon-button": "polymerelements/paper-icon-button#1 - 2", 29 | "paper-input": "polymerelements/paper-input#1 - 2", 30 | "paper-spinner": "PolymerElements/paper-spinner#1 - 2", 31 | "paper-styles": "PolymerElements/paper-styles#1 - 2", 32 | "paper-toggle-button": "polymerelements/paper-toggle-button#1 - 2", 33 | "url": "webcomponents/URL#^0.5.7", 34 | "web-component-tester": "^6.0.0", 35 | "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0" 36 | }, 37 | "variants": { 38 | "1.x": { 39 | "dependencies": { 40 | "iron-location": "polymerelements/iron-location#^0.8.1", 41 | "polymer": "Polymer/polymer#^1.9" 42 | }, 43 | "devDependencies": { 44 | "google-youtube": "GoogleWebComponents/google-youtube#^1.2.1", 45 | "iron-component-page": "polymerelements/iron-component-page#^1.0.0", 46 | "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.0", 47 | "iron-pages": "PolymerElements/iron-pages#^1.0.7", 48 | "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0", 49 | "paper-card": "PolymerElements/paper-card#^1.1.1", 50 | "paper-icon-button": "polymerelements/paper-icon-button#^v1.0.0", 51 | "paper-input": "polymerelements/paper-input#^1.1.2", 52 | "paper-spinner": "PolymerElements/paper-spinner#^1.1.1", 53 | "paper-styles": "polymerelements/paper-styles#^1.0.13", 54 | "paper-toggle-button": "polymerelements/paper-toggle-button#^1.0.0", 55 | "web-component-tester": "^4.0.0", 56 | "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" 57 | }, 58 | "resolutions": { 59 | "webcomponentsjs": "^0.7" 60 | } 61 | } 62 | }, 63 | "resolutions": { 64 | "webcomponentsjs": "^1.0.0" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /demo/youtube-demo/youtube-search.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 50 | 51 | 102 | 103 | -------------------------------------------------------------------------------- /app-route-converter.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 68 | 69 | 80 | -------------------------------------------------------------------------------- /demo/data-loading-demo/flickr-image-page.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 65 | 110 | 111 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 13 | 14 | # Polymer Elements 15 | ## Guide for Contributors 16 | 17 | Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines: 18 | 19 | ### Filing Issues 20 | 21 | **If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions: 22 | 23 | 1. **Who will use the feature?** _“As someone filling out a form…”_ 24 | 2. **When will they use the feature?** _“When I enter an invalid value…”_ 25 | 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_ 26 | 27 | **If you are filing an issue to report a bug**, please provide: 28 | 29 | 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug: 30 | 31 | ```markdown 32 | The `paper-foo` element causes the page to turn pink when clicked. 33 | 34 | ## Expected outcome 35 | 36 | The page stays the same color. 37 | 38 | ## Actual outcome 39 | 40 | The page turns pink. 41 | 42 | ## Steps to reproduce 43 | 44 | 1. Put a `paper-foo` element in the page. 45 | 2. Open the page in a web browser. 46 | 3. Click the `paper-foo` element. 47 | ``` 48 | 49 | 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/hirore/edit?html,output](https://jsbin.com/hirore/edit?html,output). 50 | 51 | 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers. 52 | 53 | ### Submitting Pull Requests 54 | 55 | **Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request. 56 | 57 | When submitting pull requests, please provide: 58 | 59 | 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax: 60 | 61 | ```markdown 62 | (For a single issue) 63 | Fixes #20 64 | 65 | (For multiple issues) 66 | Fixes #32, fixes #40 67 | ``` 68 | 69 | 2. **A succinct description of the design** used to fix any related issues. For example: 70 | 71 | ```markdown 72 | This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked. 73 | ``` 74 | 75 | 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered. 76 | 77 | If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that! 78 | -------------------------------------------------------------------------------- /app-route-converter-behavior.html: -------------------------------------------------------------------------------- 1 | 10 | 113 | -------------------------------------------------------------------------------- /demo/data-loading-demo/flickr-search-page.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 53 | 111 | 112 | -------------------------------------------------------------------------------- /demo/simple-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | app-route Demo 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 38 | 48 | 49 | 50 | 51 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /demo/youtube-demo/video-viewer.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 91 | 92 | 133 | 134 | -------------------------------------------------------------------------------- /test/test-app-example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | app-route 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 138 | 139 | -------------------------------------------------------------------------------- /demo/youtube-demo/youtube-toolbar.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 182 | -------------------------------------------------------------------------------- /demo/youtube-demo/youtube-lite.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 19 | 20 | 42 | 43 | 204 | 205 | -------------------------------------------------------------------------------- /test/app-location.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | app-location 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 28 | 29 | 30 | 31 | 34 | 35 | 36 | 37 | 40 | 41 | 42 | 169 | 170 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 15 | 16 | 17 | 18 | 19 | app-route Demo 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 106 | 107 | 208 | 209 | 210 | 211 | -------------------------------------------------------------------------------- /app-location.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 67 | 68 | 80 | 205 | 206 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | [![Build status](https://travis-ci.org/PolymerElements/app-route.svg?branch=master)](https://travis-ci.org/PolymerElements/app-route) 16 | 17 | 18 | ## <app-route> 19 | 20 | `app-route` is an element that enables declarative, self-describing routing 21 | for a web app. 22 | 23 | > *n.b. app-route is still in beta. We expect it will need some changes. We're counting on your feedback!* 24 | 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 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 29 | did not match. 30 | 31 | Here is a basic example, when used with `app-location`: 32 | 33 | ```html 34 | 35 | 40 | 41 | ``` 42 | 43 | In the above example, the `app-location` produces a `route` value. Then, the 44 | `route.path` property is matched by comparing it to the `pattern` property. If 45 | the `pattern` property matches `route.path`, the `app-route` will set or update 46 | its `data` property with an object whose properties correspond to the parameters 47 | in `pattern`. So, in the above example, if `route.path` was `'/about'`, the value 48 | of `data` would be `{"page": "about"}`. 49 | 50 | The `tail` property represents the remaining part of the route state after the 51 | `pattern` has been applied to a matching `route`. 52 | 53 | Here is another example, where `tail` is used: 54 | 55 | ```html 56 | 57 | 62 | 63 | 67 | 68 | ``` 69 | 70 | In the above example, there are two `app-route` elements. The first 71 | `app-route` consumes a `route`. When the `route` is matched, the first 72 | `app-route` also produces `routeData` from its `data`, and `subroute` from 73 | its `tail`. The second `app-route` consumes the `subroute`, and when it 74 | matches, it produces an object called `subrouteData` from its `data`. 75 | 76 | So, when `route.path` is `'/about'`, the `routeData` object will look like 77 | this: `{ page: 'about' }` 78 | 79 | And `subrouteData` will be null. However, if `route.path` changes to 80 | `'/article/123'`, the `routeData` object will look like this: 81 | `{ page: 'article' }` 82 | 83 | And the `subrouteData` will look like this: `{ id: '123' }` 84 | 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'`, 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. 89 | 90 | 91 | 92 | ## <app-location> 93 | 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` 96 | elements will automatically watch the global location for changes. As changes 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 99 | elements. 100 | 101 | An example of the public API of a route object that describes the URL 102 | `https://elements.polymer-project.org/elements/app-location`: 103 | 104 | ```css 105 | { 106 | prefix: '', 107 | path: '/elements/app-location' 108 | } 109 | ``` 110 | 111 | Example Usage: 112 | 113 | ```html 114 | 115 | 116 | ``` 117 | 118 | As you can see above, the `app-location` element produces a `route` and that 119 | property is then bound into the `app-route` element. The bindings are two- 120 | directional, so when changes to the `route` object occur within `app-route`, 121 | they automatically reflect back to the global location. 122 | 123 | ### Hashes vs Paths 124 | 125 | By default `app-location` routes using the pathname portion of the URL. This has 126 | broad browser support but it does require cooperation of the backend server. An 127 | `app-location` can be configured to use the hash part of a URL instead using 128 | the `use-hash-as-path` attribute, like so: 129 | 130 | ```html 131 | 132 | ``` 133 | 134 | ### Integrating with other routing code 135 | 136 | There is no standard event that is fired when window.location is modified. 137 | `app-location` fires a `location-changed` event on `window` when it updates the 138 | location. It also listens for that same event, and re-reads the URL when it's 139 | fired. This makes it very easy to interop with other routing code. 140 | 141 | So for example if you want to navigate to `/new_path` imperatively you could 142 | call `window.location.pushState` or `window.location.replaceState` followed by 143 | firing a `location-changed` event on `window`. i.e. 144 | 145 | ```javascript 146 | window.history.pushState({}, null, '/new_path'); 147 | window.dispatchEvent(new CustomEvent('location-changed')); 148 | ``` 149 | 150 | 151 | 152 | ## <app-route-converter> 153 | 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 156 | is to be fed into route-consuming elements such as `app-route`. 157 | 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 160 | an app, please refer to [app-location](https://github.com/PolymerElements/app-route/blob/master/app-location.html) 161 | and [app-route](https://github.com/PolymerElements/app-route/blob/master/app-route.html). 162 | 163 | An example of a route object that describes 164 | `https://elements.polymer-project.org/elements/app-route-converter?foo=bar&baz=qux` 165 | and should be passed to other `app-route` elements: 166 | 167 | ```css 168 | { 169 | prefix: '', 170 | path: '/elements/app-route-converter', 171 | __queryParams: { 172 | foo: 'bar', 173 | baz: 'qux' 174 | } 175 | } 176 | ``` 177 | 178 | `__queryParams` is private to discourage directly data-binding to it. This is so 179 | that routing elements like `app-route` can intermediate changes to the query 180 | params and choose whether to propagate them upstream or not. `app-route` for 181 | example will not propagate changes to its `queryParams` property if it is not 182 | currently active. A public queryParams object will also be produced in which you 183 | should perform data-binding operations. 184 | 185 | Example Usage: 186 | 187 | ```html 188 | 189 | 192 | 193 | 197 | 198 | 199 | 200 | ``` 201 | 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 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 206 | turn is consumed by the `app-route`. 207 | 208 | 209 | 210 | ## Polymer.AppRouteConverterBehavior 211 | 212 | Provides bidirectional mapping between `path` and `queryParams` and a 213 | app-route compatible `route` object. 214 | 215 | For more information, see the docs for `app-route-converter`. 216 | 217 | 218 | -------------------------------------------------------------------------------- /app-route.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 85 | 86 | 431 | -------------------------------------------------------------------------------- /test/app-route.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | app-route 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 35 | 36 | 40 | 41 | 42 | 43 | 66 | 73 | 74 | 75 | 76 | 79 | 80 | 81 | 82 | 85 | 86 | 87 | 532 | 533 | --------------------------------------------------------------------------------

Public Domain Image Search

{{metadata.photo.title._content}}