Aurelia - disable reset on router-view - view

Question

My forms keeps resetting if I change tabs on router-view, is there a way to prevent this (if not what's the alternative)
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

This is a state persisting issue. The easiest solution is to store state in:
The parent view
A non-view related singleton class (or static variables)
Localstorage persisting (possibly coinciding with the previous option)
The first way to do it: save it in the parent view.
For example, you could create a cache inside the App class:
export class App {
formData = {};
configureRouter(config, router) {
{ route: ["", "dashboard"], [..snip..] settings: { formData: this.formData, icon: 'icon-home' } }
}
}
Inside your view, you can then do:
activate(params, routeConfig) {
this.formData = routeConfig.settings.formData;
this.icon = routeConfig.settings.icon;
}
And in the HTML, just bind it to formData:
<input type="text" value.bind="formData.text" />
This kind of assumes, that the whole App revolves around that form. Otherwise, it wouldn't really make much sense to store it in there.
That's one way to do it, anyway (the first one I pointed out in the list).
The other way to do it: singleton.
Create a new class called AppState or something along those lines.
export class AppState {
formData = {};
}
Then in your view, you should import and inject it:
import { AppState } from './app-state';
export class YourView {
static inject = [AppState];
constructor(appState) {
this.appState = appState;
}
}
And then in your HTML, you can bind it like so:
<input type="text" value.bind="appState.formData.text" />
Or third way: a static class.
Create a new class called AppState or something along those lines.
export class AppState {
static formData = {};
}
Then in your view, you should import and inject it:
import { AppState } from './app-state';
export class YourView {
AppState = AppState;
}
And then in your HTML, you can bind it like so:
<input type="text" value.bind="AppState.formData.text" />