i have installed the polymer starter kit and once i load the starter kit every thing gets loaded properly and the url looks like http://127.0.0.1:8887/ then once i click on any view that page gets open and url changes to http://127.0.0.1:8887/view1 but if i reload the browser now, instead of showing the same page it displays the entry not found error.i have tried searching over internet for solution but i didn't find one.what should i do to fix it.
When you refresh the page (http://127.0.0.1:8887/view1) you request the view1 resource from the server, but the server can't find it because there isn't. That path (.../view1) is only recognized by the polymer app itself and not the server.
Try using hash in the path. Add the use-hash-as-path attribute to your app-location element inside the main page.
So, it should look like this:
<app-location route="{{route}}" use-hash-as-path></app-location>
EDIT
It is not enough to add the use-hash-as-path property. You will also need to change slightly the href in the menu items.
href="/view1" to href="#/view1"
The code with more details:
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="#/view1">View One</a>
<a name="view2" href="#/view2">View Two</a>
<a name="view3" href="#/view3">View Three</a>
</iron-selector>
</app-drawer>
...
</app-drawer-layout>
Related
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
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?
I am building a Polymer3 music app, which fetches playlists from public api. All the playlistNames are implemented as routerLinks.
On clicking, the playlistName is getting bold, but on page reload the routerLink is not highlighted(bold).
For example: If i am entering localhost:8081/playlist1 in URL, then playlist1 should be bold, on page reload.
Thanks in advance.
static get template() {
return html `
<app-location route="{{route}}" url-space-regex="^[[rootPath]]">
</app-location>
<app-route route="{{route}}" pattern="[[rootPath]]:page" data="{{routeData}}" tail="{{subroute}}">
</app-route>
<app-drawer-layout fullbleed="" narrow="{{narrow}}">
<!-- Drawer content -->
<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<template is="dom-repeat" items="[[playlists]]">
<a name="[[item.name]]" href="[[rootPath]][[item.name ]]">[[item.name]]</a>
</template>
</iron-selector>
</app-drawer>
`;
}
On clicking, the playlistName is getting bold, but on page reload the
routerLink is not highlighted(bold).
This happens probably because of IronSelectableBehaviour present in the iron-selector element, which I believe applies the bold style on-tap. This also happens for paper-tabs for example.
So, the bold style is being applied because you're tapping the item. However, if you go to a page directly through the URL, you didn't actually click the item, that's why you're not getting the same behaviour.
Solution:
You will always have the class iron-selected on the current active item, whether through URL or on tap.
From the documentation:
iron-selector is not styled. Use the iron-selected CSS class to style
the selected element.
Try it out
<style>
.iron-selected {
background: #eee;
}
</style>
How can you add a new page (say <my-view4>) to the Polymer Starter Kit that covers the whole screen and has a different header than the default view?
<app-location route="{{route}}" url-space-regex="^[[rootPath]]">
</app-location>
<app-route
route="{{route}}"
pattern="[[rootPath]]:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-view404 name="view404"></my-view404>
</iron-pages>
The default iron pages selector is embedded into the app-header-layout element, and all new elements (or views) are displayed inside app-header layout. I would however like to add a new element that covers the whole site and "breaks out" of the iron-pages sandbox inside the app-header-layout.
At the same time the app-route element should still work so that navigating to the new route is possible via the /view4 link. Is this possible with app-route and the PSK?
Sure it is possible, that's why they give that example. I am not sure where exactly is your problem since you did not post any of your own code, this looks like what is provided by the starter kit, but you can try to follow the episode from the Polycasts series that covers the Polymer CLI, and you will see exactly what you're trying to do: https://www.youtube.com/watch?v=pj2lmXVa84U
This is part of polymer application starter kit code. I just added a my-news-list.html to elements in src:
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer id="drawer" slot="drawer">
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="news" href="/news">News</a>
<a name="view1" href="/view1">View One</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header slot="header" condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-news-list name="news" route="{{subroute}}"></my-news-list>
<my-view1 name="view1"></my-view1>
<my-view404 name="view404"></my-view404>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
Everything is OK, <my-news-list> and <my-view1> loads correctly when click on theme in <iron-selector>. in <my-news-list> element I got list of all news with <iron-ajax> and it works fine:
<iron-ajax auto url="localhost/api/news/news" handle-as="json" last-response="{{newsList}}"></iron-ajax>
<template is="dom-repeat" items="{{newsList}}">
[[item.title]]
</template>
I have a other element for viewing single news content, named <my-news-view> that I want to load it when click on title of each news in <my-news-list>. On click path changes to: localhost:8081:/news/2 correctly but <my-news-list> element loads again Instead of <my-news-view>.
I don't paste other elements codes(bindings, ...).
Now I want to know how config <app-route> and use subroute to have load elements in this paths:
// For News
/news //all news list. loads my-news-list element
/news/12 //news[12] view. loads my-news-view elemnt
/news/categories //all categories list view. loads my-news-categories element
/news/categories/3 //category[3] news list view. loads my-news-category element
// and jobs similar to module
/Jobs
/jobs/country/cityName
/jobs/country/cityName/featured
Thanks for your help.
You should declare you "my-news-view" component in "iron-pages" just like you do:
<iron-pages selected="[[page]]" attr-for-selected="name"
fallback-selection="view404" role="main">
<my-news-view name="news-view" route="{{subroute}}" />
</iron-pages>
So iron-pages would know what component to show when user navigate to /news-view/12 based on name attribute not component name itself.
BUT. There are some tricky parts on your solution:
Note how you pass subroute to child components to decouple it internal
routing mechanism from actual url path where it resides.
Starter kit uses lazy-loading to import components and inside that function it adds prefix 'my-' to actual route 'news-view'. So that is how result component name to load become 'my-news-view'. That may confuse.
You could read more about this polymer shop case study.
PS: personally I think that the way the polymers sample app routing works confused a lot because it looks like web-server static name resolution (based on component name, and not components attribute 'name') but it don't.
You should add the component inside the component and then use the sub route to know the id for
Try dna-router. It is now compatible with Polymer 2.0 project.
Please follow this answer - https://stackoverflow.com/a/31236817/5069120
Or visit https://github.com/Saquib764/dna-router
In a simple routing configuration in Polymer, like that obtained from the starter-kit:
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">View One</a>
<a name="view2" href="/view2">View Two</a>
<a name="view3" href="/view3">View Three</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-view404 name="view404"></my-view404>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
and a view with a button which if pressed should change the route, like this:
<dom-module id="my-view1">
<template>
<paper-button raised on-tap="changeRoute">Change route</paper-button>
</template>
<script>
Polymer({
is: 'my-view1',
changeRoute() {
// How to change route here?
}
});
</script>
</dom-module>
how can I change the route programmatically, in the event handler above? I tried changing window.location without success (I'm inside Electron, not sure if it's part of the problem).
From the Polymer docs, about changing routes:
Updating the route. The route object is read-write, so you can use
two-way data binding or this.set to update the route. Both the route
and routeData objects can be manipulated this way. For example:
this.set('route.path', '/search/');
Or:
this.set('routeData.user', 'mary');
but this is correct (and works) if done inside the main component (the one that defines the routes), while it doesn't work if called inside a view. Another way to put this question maybe is: how can I access the main router object from an inner component?
There's a few ways to do this, I may have gone overboard but I started to get into it so here goes...
Based on the answer you gave it looks like you just want to "go back". If that's the case you could just use
history.back();
Or if you want to move to a new path then a more robust, including more SEO friendly approach (I believe) is to use something like:
<a href="/newpath" tabindex="-1">
<paper-button>Change Route</paper-button>
</a>
Or the answer by #Carlos works too, but the app-route "philosophy" seems to be more about allowing a decentralized routing approach & so passing an event up to let another component handle the route feels kind of like it's going against the grain. Although this is not necessarily the case since a component can be quite simple, maybe just a button, icon, etc, so you would probably want routing handled by a parent element. In this case though it looks like your component is a full view so I'd lean more towards it being a case where it might handle the routing itself.
I'd also say something similar to the above for #tony19's answer as well.
I think the biggest drawback of the approach in your own answer is that you're digging in the guts of another element so you've tightly coupled to it. That one is definitely not recommended.
Oh & one more way to change the route:
window.history.pushState({}, null, '/new_path');
window.dispatchEvent(new CustomEvent('location-changed'));
This is given here - https://github.com/PolymerElements/app-route#integrating-with-other-routing-code But this is really more for working with other routing code or special situations & would be pretty hacky in your case.
Uhm. Turned out it was not so difficult:
document.querySelector("main-window").set('route.path', "/");
where main-window is the container component that defines the routes (first source file).
Does anyone have a better/more general approach to this problem?
I had the same issue and solved it like by adding the routing-elements to the views as well:
<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/app/:view" data="{{routeData}}" tail="{{subRoute}}"></app-route>
<app-route route="{{subRoute}}" pattern="/:id" data="{{idData}}" active="{{onDetailPage}}"></app-route>
then you can change the route from within the element like this:
this.set("route.path", "/app/foo");
Your 'view1' could fire a custom event that would trigger a route change in your app.
This would follow the observer pattern recommended in: Thinking in Polymer (The Polymer Summit 2015)
Note: the answer to this question may also help you.
You can easily do so with the path property of the app-location's element:
changeRoute() {
var $router = this.shadowRoot.querySelector("app-location");
$router.path = "/view1";
}
Here the element's documentation app-location:
Setting the path property will fire up the path-changed event... This will begin the events' cascade to the iron-pages element and switch the view.