Aurelia-在路由器视图上禁用重置

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

这是状态持续存在的问题。 最简单的解决方案是将状态存储在：

• 父视图
• 与视图无关的单例类（或静态变量）
• 本地存储持续存在（可能与上一个选项一致）

---

第一种方法：将其保存在父视图中。

例如，您可以在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" />

---

或第三种方式：静态类。

创建一个名为AppState或类似内容的新类。

export class AppState {
  static formData = {};
}

然后，在您看来，您应该导入并注入它：从'./app-state'导入{AppState}；

export class YourView {
  AppState = AppState;
}

然后在您的HTML中，可以像这样绑定它：

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