pagejs和高分子数据路由在子组件中

Question

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

我要和url一起做这个主细节工作。因此，使用pagejs，我配置了我的路由。当列表和细节都直接在我的霓虹灯动画页标签中的时候，两者之间的切换(在霓虹灯动画页面中)非常好。

但是，当我将它们添加到用户视图(并将用户视图放在霓虹灯动画页面标签中)时，列表或细节上的数据路由属性不会被触发。

当封装在另一个“父”组件中时，如何使数据路由属性工作？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>

user-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，另一条用于子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>

在pagejs处理程序中，需要为相应的路由(用户详细信息/列表)设置subroute。