aurelia несколько viewPorts на одном компоненте

Question

Можно ли использовать viewPorts с одним и тем же компонентом, не создавая его дважды. Например

 config.map([
        {
            route: 'route1',
            name: 'route1',
            viewPorts: {
                default: {moduleId: './route1-module'},
                heading: {moduleId: './route1-module', view: './route1-module-heading.html'}
            },
            nav: true,
            title: 'Route1'

        }]);

Модуль route1 был создан и подключен дважды. Мне нужно избегать этого.

Answer 1

Похоже, вы хотите использовать функцию макетов, которая будет присутствовать в более позднем выпуске (я не уверен, когда, но PR был слит недавно).

PR находится здесь: https://github.com/aurelia/templating-router/pull/25

По сути, это дает вам возможность указать пару view/viewmodel (макет), которая будет располагаться вместо исходного модуля при маршрутизации. Вместо этого исходный контент будет проецироваться в макет с помощью slots,

Пример:

Маршрут-конфигурации

config.map([
    { layoutView: "layout.html", moduleId: 'page1' }
]);

page1.html

<template>
    <div slot="slot1">some content</div>
    <div slot="slot2">some other content</div>
</template>

layout.html

<template>
    <div class="some-fancy-container">
        <p>This is slot 2</p>
        <!-- slot2 content will be projected here -->
        <slot name="slot2">some fallback content</slot>
    </div>
    <div class="sidebar">
        <p>This is slot 1</p>
        <!-- slot1 content will be projected here -->
        <slot name="slot1">some fallback content</slot>
    </div>
</template>

Результирующий вывод HTML:

<template>
    <div class="some-fancy-container">
        <p>This is slot 2</p>
        some other content
    </div>
    <div class="sidebar">
        <p>This is slot 1</p>
        some content
    </div>
</template>

Это похоже на партиал MVC или главные страницы ASP.NET и позволяет указать альтернативный макет для определенных страниц (без использования дочерних маршрутов).

Он очень отличается от видовых экранов (он также работает с видовыми экранами тем, что вы также можете указать макет для видового экрана)