Как открыть несколько страниц в одном приложении?

Question

Я знаю, что Aurelia - это основа для SPA, но мне нужно одновременно открывать несколько страниц в браузере.

Я хочу разместить каждую страницу (view/viewmodel) в перетаскиваемом div и одновременно открыть несколько открываемых. Они будут выбраны пользователем из меню.

Я просмотрел viewPorts, но не вижу, как они помогут в этой проблеме.

Есть ли другой способ сделать это?

Answer 1

Да, есть способ сделать это.

Вы говорите страницы, но в основном они являются компонентами. Каждый компонент имеет файл HTML (view) и JS (view-model). Они могут быть включены в качестве пользовательских элементов.

Так что, если вам нужно несколько возможных компонентов на одной странице, все, что вам нужно сделать, это создать один компонент, который имеет местозаполнитель для этих представлений.

Возможно, вы хотели бы что-то ищет, как это:

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; 
} 

делает их перетаскивать & Droppable работает как любой другой элемент, есть много решений для этого можно найти. Просто сделайте <page1> и <page2> перетаскиваемым.