アウレリア - ルータ・ビューの無効リセット

Question

私のフォーム私はルータビューのタブを変更した場合（代替は何でない場合は）これを防ぐ方法はあり、リセットし続ける

export class App { 
configureRouter(config, router) { 
config.title = "Aurelia"; 
config.map([ 
    { route: ["", "dashboard"], name: "dashboard", moduleId: "HTML/viewmodels/dashboard", nav: true, title: "Dashboard", settings: "icon-home" }, 
    { route: "addons", name: "addons", moduleId: "HTML/viewmodels/addons", nav: true, title: "Addons", settings: "icon-file" }, 
    { route: "error", name: "error", moduleId: "HTML/viewmodels/error", nav: true, title: "Error", settings: "icon-info-sign" } 
]); 

this.router = router; 
console.log(router); 
    } 
} 

Answer 1

これは、状態永続化です問題。

• 親ビュー
• 非ビュー関連シングルトンクラス（または静的変数）
• のlocalStorageが持続（おそらく以前のオプションに一致する）

：最も簡単な解決策は、状態を保存することです

---

最初の方法：親ビューに保存します。

たとえば、あなたがAppクラス内にキャッシュを作成することができますが：

export class App { 
    formData = {}; 

    configureRouter(config, router) { 
    { route: ["", "dashboard"], [..snip..] settings: { formData: this.formData, icon: 'icon-home' } } 
    } 
} 

ビューの中では、あなたがして行うことができます。

activate(params, routeConfig) { 
    this.formData = routeConfig.settings.formData; 
    this.icon = routeConfig.settings.icon; 
} 

そしてHTMLで、ちょうどにバインドformData：

<input type="text" value.bind="formData.text" /> 

この種のものは、全体のAppはそのフォームの周りを回転します。さもなければ、そこにそれを格納することは実際にはあまり意味がありません。

それは、とにかく（私がリストで指摘した最初の）それを行う方法です。

---

他の方法：シングルトン。

AppStateという名前の新しいクラスを作成してください。

export class AppState { 
    formData = {}; 
} 

次に、あなたのビューで、あなたはそれをインポートし、注入する必要があります

import { AppState } from './app-state'; 

export class YourView { 
    static inject = [AppState]; 

    constructor(appState) { 
    this.appState = appState; 
    } 
} 

そして、あなたのHTMLに、あなたはそうのようにそれをバインドすることができます。

<input type="text" value.bind="appState.formData.text" /> 

---

または第3の方法：静的なクラス。

AppStateという名前の新しいクラスを作成してください。

export class AppState { 
    static formData = {}; 
} 

次に、あなたのビューで、インポートし、それを注入する必要があります インポートから{AppState}」。/ app-state ';

export class YourView { 
    AppState = AppState; 
} 

そして、あなたのHTMLに、あなたはそうのようにそれをバインドすることができます：私はすべての私のタブが永続状態になりたいと、彼らが持っている場合、私がしたいいくつかの他のクラスのインスタンスが同様に保つ何

<input type="text" value.bind="AppState.formData.text" />