没有视图的 Aurelia 视图模型？答案

【问题标题】：Aurelia view-model without a view?没有视图的 Aurelia 视图模型？
【发布时间】：2016-09-08 23:57:40
【问题描述】：

当用户首次启动我的 Aurelia Web 应用程序时，我需要检查 localStorage 以查看我的应用程序是否需要恢复其最后状态。如果是，则需要从 localStorage 设置内部模型值并恢复路由。如果没有，它只需将路线设置为初始路线（称为“游戏”）。所以我想我可以像这样在 app.js 中设置我的路由器配置：

config.map([
    { route: '', name: 'launcher', moduleId: 'launcher'},
    { route: 'game', name: 'game', moduleId: 'game-view'},
    ......

启动器模块将在哪里进行初始化。

launcher.js（部分伪代码）：

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

@noView
@inject(Router)
export class Launcher {
    constructor(router) {
        Get localStorage values, including lastState;

        if (need to restore the past state) {
            router.navigateToRoute(lastState);
        } else {
            router.navigateToRoute('game');
        }
    }
}

问题是，我真的不需要这个模块的视图，但是如果我没有 launcher.html 文件，Aurelia 会抛出错误（即使一切正常）。我认为 noView 装饰器可以解决问题，但它没有。

有没有办法让一个没有视图的可导航模块？有没有更好的方法来做到这一点？

【问题讨论】：

我不会为这个逻辑使用视图模型，它没有任何意义。您可以在路由器挂钩中执行此操作，甚至可以在您的 app.js 中调用为您执行此操作的服务。
@PWKad 是的。这似乎不是一个好方法。我尝试在我的 app.js 中调用 router.navigateToRoute，但它不起作用。也许我在错误的时间打电话给它。我没有使用路由器挂钩。你能指出这些信息吗？
@PWKad 我想我可以将 config.map 中的路线更改为 ['', 'game']，然后将 canActivate 添加到我的游戏视图模型中。如果没有保存状态，我只会返回 true。如果有，我想我会返回一个导航命令（根据文档）。那么我的问题是什么是导航命令？
查看pipelines。你也许可以使用它。
@RobinsonCollado 我去看看。

标签： aurelia

【解决方案1】：

如果您不想要视图，也可以使用@noView 属性。

基本用法：

import {noView} from 'aurelia-framework';

@noView
export class MyClass{
}

【讨论】：

【解决方案2】：

您可以将 Launcher 注入到您的 app.js 中：

import {inject} from 'aurelia-framework';
import {launcher} from '[file path to launcher]';

@inject(launcher)
export class App{
    constructor(launcher)
    {
        this.launcher = launcher;
        this.launcher.activate();
    }
}

然后在你的启动器激活方法中，有你的逻辑：

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

@inject(Router)
export class Launcher {
    constructor(router) { 
        this.router = router;
    }

    activate(){
         Get localStorage values, including lastState;

         if (need to restore the past state) {
             this.router.navigateToRoute(lastState);
         } 
         else {
             this.router.navigateToRoute('game');
         }
    }        
}

如果这不起作用，那么另一种选择是设置根目录然后导航到某个状态，即

import {inject, Aurelia} from 'aurelia-framework';

@inject(Aurelia)
export class Launcher{
    constructor(Aurelia){
        this.aurelia = Aurelia;
    }

    activate(){
        Get localStorage values, including lastState;

        if (need to restore the past state) {
         this.aurelia.setRoot([file path of starting page])
             .then((aurelia) => {   aurelia.root.viewModel.router.navigateToRoute('lastState');}); 
     } 
     else {
         this.aurelia.setRoot([file path of starting page])
             .then((aurelia) => {  aurelia.root.viewModel.router.navigateToRoute('game');}); 
          }
     }

}

只需确保您的起始页面（将包含路由器映射）不是 app.js，因为这样您就会有循环依赖。您可以将另一个文件作为您的起始页。

【讨论】：

【解决方案3】：

constructor(router) {
    this._router = router;
}

activate(){
    //Get localStorage values, including lastState;
    if (need to restore the past state) {
        this._router.navigateToRoute(lastState);
    } else {
        this._router.navigateToRoute('game');
    }
}

【讨论】：

这是我的问题中已有的代码。你是说这是在 app.js 中吗？如果是这样，我试过了，它不起作用。
您是否尝试将 router.navigateToRoute 从构造函数移动到 activate() ？
在 app.js 中是。