I'm having problems with app-route (mainly because I don't understand it).
The specific issue I'm having is changing the url/route. I'm using an iron-selector
on an app-drawer
to change the iron-page
view. The view is switching, but the url is not updating. The other issue is that in one of my views I need to switch to a detail-view (think /events -> /event/:id). I am not sure of the correct way to change a view inside a view.
Enough talk - lets look at some code
The structure of the application is as follows:
/login
/admin
/admin/view1
/admin/view1/:id
/admin/view2
/user
/user/view1
/user/view1/:id
/user/view2
my-app
has an iron-pages element that holds the views for login-page
, admin-portal
, and user-portal
. admin-portal
and user-portal
each have iron-pages
that holds view1
, view2
, etc.
user-portal
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/user/:view"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<iron-selector attr-for-selected="name" selected="{{routeData.view}}" fallback-selection="clinics">
<vaadin-item name="clinics">
<iron-icon icon="vaadin:list-select"></iron-icon>
Virtual Clinics
</vaadin-item>
<vaadin-item name="settings">
<iron-icon icon="vaadin:cog-o"></iron-icon>
Settings
</vaadin-item>
<vaadin-item name="help">
<iron-icon icon="vaadin:info-circle-o"></iron-icon>
Help
</vaadin-item>
<vaadin-item name="logout">
<iron-icon icon="vaadin:exit-o"></iron-icon>
Sign Out
</vaadin-item>
</iron-selector>
<iron-pages selected="[[routeData.view]]"
attr-for-selected="name"
selected-attribute="visible"
fallback-selection="view404">
<user-clinic-list-view name="clinics" events="{{events}}" user="{{user}}"></user-clinic-list-view>
<user-clinic-view name="event" route="{{subroute}}"></user-clinic-view>
<user-setting-view name="settings" route="{{subroute}}"></user-setting-view>
<user-help-view name="help" route="{{subroute}}"></user-help-view>
<my-view404 name="view404"></my-view404>
</iron-pages>
user-clinic-list-view
In this view I have an iron-list
with a button that needs to take me to user-clinic-view
but where I change the route to something like /event/:id
I have tried <a href="/user/event/:id"></a>
I have also tried
window.history.pushState({}, null, '/user/event/:id');
window.dispatchEvent(new CustomEvent('location-changed'));
This seems like a very basic web application, and yet the routing in Polymer is so confusing and there are no examples of deep routing. Every example I've seen is only 1 layer deep (like the starter kit).
What are some best practices for routing?