<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">
<paper-material elevation="1">
<bortini-home></bortini-home>
</paper-material>
</section>
<section data-route="tv">
<paper-material elevation="1">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="tvList">
<paper-material elevation="1">TV list</paper-material>
</section>
<section data-route="tvAdd">
<paper-material elevation="1">TV Add</paper-material>
</section>
<section data-route="tvEdit">
<paper-material elevation="1">TV edit</paper-material>
</section>
<section data-route="tvView">
<paper-material elevation="1">TV details</paper-material>
</section>
</iron-pages>
</paper-material>
</section>
<section data-route="users">
<paper-material elevation="1">
<h2 class="paper-font-display2">Users</h2>
<p>This is the users section</p>
<a href="/users/Rob">Rob</a>
</paper-material>
</section>
<section data-route="user-info">
<paper-material elevation="1">
<h2 class="paper-font-display2">
User:<span>{{params.name}}</span>
</h2>
<div>This is <span>{{params.name}}</span>'s section</div>
</paper-material>
</section>
<section data-route="contact">
<paper-material elevation="1">
<h2 class="paper-font-display2">Contact</h2>
<p>This is the contact section</p>
</paper-material>
</section>
</iron-pages>
Also my route looks like -
window.addEventListener('WebComponentsReady', function () {
// We use Page.js for routing. This is a Micro
// client-side router inspired by the Express router
// More info: https://visionmedia.github.io/page.js/
page('/', function () {
app.route = 'home';
});
page('/tv', function () {
app.route = 'tvAdd';
});
page('/tvAdd', function () {
app.route = 'tvAdd';
});
page('/users', function () {
app.route = 'users';
});
page('/users/:name', function (data) {
app.route = 'user-info';
app.params = data.params;
});
page('/contact', function () {
app.route = 'contact';
});
// add #! before urls
page({
hashbang : true
});
});
I am using "page.js" for routing.
When I press "tv" menu, it should show "tvAdd", but it just shows empty screen.
Thanks in advance.
The reason this is happening is because the two
<iron-pages>
elements are both bound to the same property. To elaborate further, here's an example:route
changes totv
<iron-pages>
element has itsselected
property changed totv
tv
page is selected in the parent<iron-pages>
<iron-pages>
has itsselected
property changed totv
tv
page in the child<iron-pages>
, so nothing is selected inside it and it remains blank.The same goes for if you were to set
route
to one of the route names that you use in the child<iron-pages>
.To solve this problem, you must bind both of the
<iron-pages>
to different properties, the first of which would determine which parent route you are on, and the second of which would determine the child route, if any.Afterwards, you would just set two properties in your routing callbacks.
Some pseudocode: