[英]Nested iron-pages (Polymer1.0)
<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. 我正在使用“ page.js”进行路由。
When I press "tv" menu, it should show "tvAdd", but it just shows empty screen. 当我按“电视”菜单时,它应该显示“ tvAdd”,但它只显示空白屏幕。
Thanks in advance. 提前致谢。
The reason this is happening is because the two <iron-pages>
elements are both bound to the same property. 发生这种情况的原因是,两个
<iron-pages>
元素都绑定到相同的属性。 To elaborate further, here's an example: 为了进一步详细说明,下面是一个示例:
route
changes to tv
route
更改route
到tv
<iron-pages>
element has its selected
property changed to tv
<iron-pages>
元素的selected
属性更改为tv
tv
page is selected in the parent <iron-pages>
tv
页面是在父<iron-pages>
<iron-pages>
has its selected
property changed to tv
<iron-pages>
的selected
属性更改为tv
tv
page in the child <iron-pages>
, so nothing is selected inside it and it remains blank. <iron-pages>
tv
中没有tv
页面 ,因此在其中没有任何选择,并且它保持空白。 The same goes for if you were to set route
to one of the route names that you use in the child <iron-pages>
. 如果要将
route
设置为在子<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. 要解决此问题,必须将两个
<iron-pages>
都绑定到不同的属性 ,第一个属性将确定您所在的父路由,第二个属性将确定子路由(如果有)。
Afterwards, you would just set two properties in your routing callbacks. 之后,您只需在路由回调中设置两个属性即可。
Some pseudocode: 一些伪代码:
<iron-pages attr-for-selected="data-route" selected="{{route}}">
...
<section data-route="tv">
...
<iron-pages attr-for-selected="data-route" selected="{{childRoute}}">
...
<section data-route="tvList">
page('/tvAdd', function () {
app.route = 'tv';
app.childRoute = 'tvAdd';
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.