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

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

父视图
一个non-view相关单例class（或静态变量）
Localstorage 持久化（可能与之前的选项一致）

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

例如，您可以在 App class:

中创建缓存

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 的新 class 或类似的东西。

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" />

或者第三种方式：静态class.

创建一个名为 AppState 的新 class 或类似的东西。

export class AppState {
  static formData = {};
}

那么在你看来，你应该导入并注入它：从'./app-state'导入{AppState};

export class YourView {
  AppState = AppState;
}

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

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

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

Aurelia - disable reset on router-view

view

render

router

reset