Aurelia View-Modell ohne Sicht?

Question

Wenn der Benutzer zuerst meine Aurelia Web App startet, muss ich localStorage überprüfen, um zu sehen, ob meine App ihren letzten Status wiederherstellen muss. Ist dies der Fall, müssen interne Modellwerte von localStorage festgelegt und die Route wiederhergestellt werden. Wenn nicht, muss nur die Route auf die anfängliche Route ("Spiel" genannt) festgelegt werden. Also dachte ich, ich könnte meinen Router config in app.js wie folgt aufgebaut:

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

Wo das Launcher-Modul wird tun, um diese Initialisierung.

launcher.js (teilweise Pseudo-Code):

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'); 
     } 
    } 
} 

Das Problem ist, brauche ich nicht wirklich einen Blick für dieses Modul, aber wenn ich nicht über eine launcher.html Datei haben, Aurelia wirft ein Fehler (obwohl alles in Ordnung ist). Ich dachte, der NoView Decorator würde den Trick machen, aber das tat es nicht.

Gibt es eine Möglichkeit, ein navigierbares Modul ohne Sicht zu haben? Gibt es einen besseren Weg, dies zu tun?

Answer 1

Sie konnte den Launcher in Ihr app.js injizieren:

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(); 
    } 
} 

dann in Launchers Methode zu aktivieren, müssen Sie Ihre Logik:

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'); 
     } 
    }   
} 

wenn das nicht funktioniert, dann ist eine weitere Option, den Stamm zu setzen und dann zu einem bestimmten Zustand zu navigieren, dh

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');}); 
      } 
    } 

} 

Stellen Sie nur sicher, dass Ihre Startseite, die die Router-Map enthält, nicht app.js ist, da Sie dann eine zirkuläre Abhängigkeit haben. Sie können eine andere Datei als Startseite festlegen.

Answer 2

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'); 
    } 
} 

Answer 3

Sie können auch das @noView-Attribut verwenden, wenn Sie keine Ansicht wünschen.

Grund Nutzung:

import {noView} from 'aurelia-framework'; 

@noView 
export class MyClass{ 
}