Question

为了从索引页面分离主 - 详细信息视图，我创建了一个父视图（即user-view.html），其中封装了用户列表和用户详细信息。在用户视图中，我可以从列表和详细信息中控制事件。

我希望这个主要细节与url一起工作。所以使用pagejs我配置了我的路线。当列表和细节都直接在我的neon-animated-pages标签中时，在两者之间切换（在霓虹动画页面中）工作非常精细。

但是当我将它们添加到用户视图（并将用户视图放在neon-animated-pages标记中）时，列表或详细信息上的数据路由属性不会被触发。

如何将数据路由属性封装在另一个父级＆＃39;零件？的index.html：

    <neon-animated-pages class="flex" attr-for-selected="data-route" selected="[[route]]">
            <home-view data-route="home"></home-view>
            <user-view  ></user-view>
          </neon-animated-pages>

用户view.html：

<template>
        <user-list data-route="users" type="{{type}}" on-user-tap="onUserTap"></user-list>
        <user-detail data-route="user-info" user="{{selectedUser}}" type="{{type}}"></user-detail>
    </template>

Answer 1

您需要将user-view.html的本地DOM添加到iron-pages或neon-animated-pages，并且您需要两条路线（一条用于父级neon-animated-pages，另一条用于子级内部user-view <neon-animated-pages class="flex" attr-for-selected="data-route" selected="[[route]]"> <home-view data-route="home"></home-view> <user-view data-route="users" route="[[subroute]]" ></user-view> </neon-animated-pages> <template> <iron-pages attr-for-selected="data-route" selected="[[subroute]]"> <user-list data-route="users" type="{{type}}" on-user-tap="onUserTap"></user-list> <user-detail data-route="user-info" user="{{selectedUser}}" type="{{type}}"></user-detail> </iron-pages> </template>）

这些方面应该有效：

subroute

在pagejs处理程序中，您需要为相应的路径设置{{1}}（用户详细信息/列表）

子组件中的pagejs和Polymer数据路由

1 个答案: