oe-app-route
v2.3.0
Published
Wrapper element used to select/import the content to display based on route change
Downloads
14
Readme
<oe-app-route>
The oe-app-route
element can be used to auto configure, application level client side routing.
<app-location route="{{route}}"></app-location>
<oe-app-route route="{{route}}" config-url="/data/UIRoutes.json">
<iron-pages route-target>
</iron-pages>
</oe-app-route>
OR
<app-location route="{{route}}"></app-location>
<oe-app-route route="{{route}}" config-url="/api/UIRoutes">
</oe-app-route>
<iron-pages route-target>
</iron-pages>
Route Configuration
config-url should return array of routes, each route object can have following properties
Property | Description | Default
---------|-------------------------------|----------
name
| route name |
path
| relative url along with placeholders e.g. /customer/:id |
type
| refer section on type and import Properties |
import
| refer section on type and import Properties |
e.g.
[{
"type": "page",
"name": "receipts",
"path": "/receipts",
"import": "receipts-partial.html"
},
{
"type": "elem",
"name": "cfe-loan-details",
"path": "/loan",
"import": "../business/cfe-loan-details.html"
}]
type and import Properties
The type property can have following values:
- page : When route type is specified as page, the html data from import is fetched and added as innerHtml of target element.
- If the path argument has any placeholders (e.g. execute/:modelName/:action) or actual URL has any query-string then the actual values can be referred in the imported html partial directly.
<h2>Performing {{action}} on {{modelName}}</h2>
- elem type of route places element specified by name property on hhe target. import property points to the location of element definition file.
- If element is not registered yet, import is href-imported and name element is added.
- Placeholders and query parameters are set on the element using
Polymer.base.set
call. (id in path or query-parameters is added as modelId attribute)<owesome-element action="..." model-name="..."></owesome-element>
- The element-name can be made dynamic by introducing elmentName as path parameter. e.g. /show/:elementName
- meta : route types are not supported anymore. Use
model-ui-generator
as a mediator element for replacing oldmeta
type of routes.