Aurelia Routing：将视图附加到选项卡式界面

Question

我几乎是 Aurelia 的新手，但在几天的时间里，我已经拿起了入门模板并在 Pluralsight 中完成了一些视频培训。我有一个独特的眼光，我似乎无法决定是compose element，custom element，还是router[=27] =] 最适合用于这种情况 - 或者如果我需要编写完全自定义的内容。

我更愿意继续使用 路由器，因为它可以让您 URL 和历史状态。可能需要在 Web 应用程序中进行深层链接。

初始化视图/视图模型时，我希望将视图附加到 DOM，不替换。 <router-view> 元素通过替换视图来工作。

将每个视图附加到 DOM，我想创建一组选项卡来表示目前已打开的每个视图。想想任何现代文本编辑器，IDE，甚至网络浏览器都会显示标签。

有时需要检测视图是否已在 DOM（视图模型 + 参数）中呈现，然后将该视图置于最前面 - 与 - 附加新视图。

对于 Aurelia、SPA 和 MVVM 的新手，您有什么建议、示例等吗？

谢谢。

Answer 1

我认为最简单的方法是使用 compose 元素。您需要一个包含所有屏幕的数组，以及另一个数组来保存打开的屏幕。像这样：

 screens = [
    { id: 1, name: 'Test 1', view: './test-1.html', viewModel: './test-1' }, 
    { id: 2, name: 'Test 2', view: './test-2.html', viewModel: './test-2' }
  ];

  _activeScreens = [];

  get activeScreens() {
    return this.screens.filter((s) => this._activeScreens.indexOf(s.id) !== -1);
  }

在 HTML 中，您只需对 activeScreens 的每次迭代使用 <compose></compose>。

我做了这个例子 https://gist.run/?id=c32f322b1f56e6f0a83679512247af7b 来向你展示这个想法。就我而言，我使用了 html table。在您的情况下，您可以使用选项卡插件，例如 Bootstrap 或 jQuery.

希望对您有所帮助！

Aurelia Routing：将视图附加到选项卡式界面

Aurelia Routing: Append Views into Tabbed Interface

aurelia