如何在同一個應用程序中打開多個頁面？

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>可拖動即可。