Question

我几乎是Aurelia的新手，但在几天的时间里，我已经选择了入门模板，并在Pluralsight进行了一些视频培训。我有一个独特的愿景，我似乎无法决定撰写元素，自定义元素或路由器最适合用于此方案 - 或者如果我需要写一些完全自定义的东西。

我更喜欢继续使用路由器，因为它可以为您提供网址和历史状态。可能需要在Web应用程序中深入链接。
初始化视图/视图模型时，我希望视图附加到DOM，未替换。 <router-view>元素通过替换视图来工作。
将每个视图附加到DOM后，我想创建一组选项卡，表示到目前为止已打开的每个视图。想想任何现代文本编辑器，IDE，甚至Web浏览器都会显示标签。
有时需要检测视图是否已经在DOM（viewmodel +参数）中呈现，并且只是将该视图带到前面的-vs-附加新视图。

对于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中，您只需对<compose></compose>的每次迭代使用activeScreens。

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

希望这有帮助！

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

1 个答案: