aurelia multiple viewPorts on the same component - viewport

Question

Is it possible to use viewPorts with the same component, without it being instantiated twice. E.g.
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-module is been instantiated and attached twice. I need to avoid it.

Answer 1

It sounds like you want to use the layouts feature that will be present in a later release (I'm not sure when but the PR has been merged recently).
The PR is here: https://github.com/aurelia/templating-router/pull/25
Essentially it gives you a chance to specify a view/viewmodel pair (a layout) that will sit in place of the original module when routed to. Instead the original content will be projected into the layout using slots.
Example:
route-config
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>
Resulting HTML output:
<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>
This is similar to MVC partials or ASP.NET master pages and allows you to specify an alternative layout for certain pages (without needing child routes).
It's very distinct from viewports (it also works with viewports in that you can specify a layout for a viewport too)