javascript - 将 "related"路由设置为在 Aurelia 中处于事件状态

Question

我的 Aurelia 应用程序中有两条路线，一个列表 (Work) 和一个详细信息 (WorkDetail)。

在导航中，我只有列表路线:

Home  |  *Work*  |  Contact  |  . . .

当我导航到 WorkDetail View 时，我想将工作路线设置为在导航中处于事件状态。

到目前为止，我尝试过的是在 activate() 中将路由设置为事件状态WorkDetail 的回调在 deactivate() 上查看和停用:

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

@inject(Router)
export class WorkDetail {
    constructor(router) {
        this.workRoute = router.routes[2].navModel;
    };

    activate(params, routeConfig, navigationInstruction) {
        this.workRoute.isActive = true;
    };

    deactivate() {
        this.workRoute.isActive = false;
    };
}

我遇到的问题是，在第一次激活时，“工作”导航项未显示为“事件”。如果我导航到另一个 WorkItem，它将被设置为“事件”。

为什么该导航项仅在后续导航操作中设置为事件状态？或者，是否有更好的方法将父/相关导航项设置为“事件”？

如果您有兴趣，这是我的 app.js:https://gist.github.com/alsoicode/37c5699f29c7562d2bf5

Answer 1

如果我正确理解了这个问题，您的导航栏中会有一个“工作”链接，它会启动“工作”列表。然后，当您单击工作列表中的项目时，您希望导航栏中的“工作”链接在工作“详细信息”屏幕激活时保持事件状态。

这是我在 this application 中使用的方法:

在 app.js 中，配置“work”路由:

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: '', redirect: 'work' },
      { route: 'work', moduleId: './work/work-section', nav: true, title: 'Work' },
      // ... routes for other top-level sections ...
    ]);
    this.router = router;
  }
}

然后将“work”文件夹添加到您的项目中。此文件夹将包含“工作”相关的 View 和 View 模型。

在工作文件夹中，添加“work-section.js”:

/**
* The shell for the work section of the application.  Will display either
* the work-list or work-detail page.
*/
export class WorkSection {
  configureRouter(config, router) {
    config.map([
      { route: '',    moduleId: './work-list',   nav: false, title: '' },
      { route: ':id', moduleId: './work-detail', nav: false, title: '' },
    ]);
  }
}

接下来添加“work-section.html”。这只是一个 <router-view> :

<template>
  <router-view></router-view>
</template>

最后，添加您的 work-list.js + .html和 work-detail.js + .html到“工作”文件夹。单击导航栏中的“工作”链接时，将默认显示工作列表。当您深入到工作列表中的项目时，导航栏中的“工作”链接将保持事件状态。

查看 sample application .它具有三个顶级部分(订单、客户和员工)。每个部分都使用这种方法。密码是here .