如何在同一个应用程序中打开多个页面？

Question

我知道Aurelia是SPA的框架，但我需要在浏览器中同时打开多个页面。

我想在一个可拖动的div中托管每个页面（view/viewmodel）并且同时打开多个页面。它们将由用户从菜单中选择。

我已经看过viewPorts，但看不到他们将如何帮助解决这个问题。

是否有另一种方法可以做到这一点？

Answer 1

是的，有一种方法可以做到这一点。

你说网页，但基本上它们是组件。每个组件都有一个HTML（视图）和JS（视图模型）文件。它们可以作为自定义元素包含在内。

所以，如果你想要在一个页面上有多个可能的组件，你需要做的就是创建一个包含这些视图占位符的组件。

也许，你会想要的东西看起来像这样：

running Gist example

<template> 
    <require from="./page1"></require> 
    <require from="./page2"></require> 

    <page1></page1> 

    <hr> 

    <page2></page2> 
</template> 

您可以为要显示所有元素创建循环，如果你需要在同一个页面的多个实例，并把上的元素的repeat.for：

HTML：

<template> 
    <require from="./page1"></require> 
    <require from="./page2"></require> 

    <page1 repeat.for="i of page1instances"></page1> 

    <hr> 

    <page2 repeat.for="i of page2instances"></page2> 
</template> 

个

JS：

export class App { 
    const page1Instances = 4; 
} 

使它们拖到&投掷的作品像其他的元素，也有要被发现的许多解决方案。只需使<page1>和<page2>可拖动即可。