能够使用 Aurelia 创建一个多选项卡界面，同时打开多个视图答案

【问题标题】：Ability to create a multi-tab interface, with multiple views open at the same time, using Aurelia能够使用 Aurelia 创建一个多选项卡界面，同时打开多个视图
【发布时间】：2016-08-18 16:35:12
【问题描述】：

每个选项卡都是一个视图，每个视图都已加载并处于活动状态。当用户通过单击 [x] 关闭选项卡时，视图将被销毁并删除。此外，可以使用不同的变量或 id 多次加载单个视图。考虑多个相同类型的文档。

视图是通过特定路线创建的。

这可以通过创建您自己的视图模型、添加视图集合、然后添加组件作为子视图来完成，但这会忽略浏览器历史记录。

阅读后看来，实现这一目标的唯一方法是创建自己的路由器。虽然我对 Aurelia 并不陌生，但我没有足够的信心创建自己的路由器。

问题是您如何维护浏览器历史记录并拥有多个活动视图。

【问题讨论】：

我不确定这里的实际问题是什么。
1.您在这里需要子路由器。 2.标签应该放在主VM的模板中 3.标签内容应该放在里面
问题是怎么做。我会试着想一个更好的方法来问它。在 gitter 的帮助下，我能够组合出一个可行的解决方案。当我有工作样本时，我会发布它。
我看到这里的问题是你可以删除标签，认为你已经删除了它，然后导航回来，你将切换到上一个路线，你也应该显示被删除的标签，这很不寻常UI 的东西。
对，有没有办法删除浏览器历史记录项？

标签： user-interface tabs aurelia

【解决方案1】：

在 gitter 上的“Patrick Walters @PWKad”的帮助下，我能够整理出一个概念证明。

我已将示例上传到 github。链接在这里。 https://github.com/BringerOD/AureliaMultiTabExample

这个想法是在你的 app.js 中创建路由来处理你将创建的所有选项卡。所有路由都需要指向一个视图模型，该视图模型将托管、组合和管理它们。

您可以根据需要添加更多路由或通配符。此外，如果您的选项卡很复杂，您可以为参数创建哈希。

我还没有弄清楚如何从浏览器历史记录中删除项目。

希望这对做同样事情的人有所帮助。

export class App {
  configureRouter(config, router) {
     
    config.map([
      { route: ['', 'shell/:section/:viewmodel/:id'], name: 'shell',      moduleId: 'shell',      nav: false, title: 'shell' }
      
    ]);

    this.router = router;
  }
}

然后，shell 页面将显示选项卡并组合视图。

<template>
</ul>
    <div class="container-fluid">
        <div class="row">

            <ul class="nav nav-tabs">
                <li repeat.for="workspace of controller.workSpaces" class="${workspace.isActive ? 'active' : ''}" role="presentation">
                    <a href.bind="workspace.href">
                        <button class="close" type="button">×</button> ${workspace.viewModel} &nbsp;&nbsp; </a>

                </li>
            </ul>
            <div class="container-fluid" repeat.for="workspace of controller.workSpaces">
                <div show.bind="workspace.isActive" class="container-fluid">
                    
                    <compose containerless view-model="./views/${workspace.section}/${workspace.viewModel}" model.bind="workspace" />
                </div>
            </div>

        </div>
    </div>

</template>

【讨论】：