Aurelia - which view port is the view-model being rendered in?

Question

I have a two-column layout setup, the two columns have very similar functionality, so the very same view-model is being reused. Hovewer, the rendering might slightly differ depending on which side is it being rendered, so wondering how is it possible to access view port information?

Consider this setup:

app.js

export class App {
    configureRouter(config: RouterConfig, router: Router): void {
        config.map([ {
            route: '',
            name: 'home',
            viewPorts: {
                left: { moduleId: 'module1' },
                right: { moduleId: 'module1' },
            }
        }]);
    }
}

app.html

<template>
    <router-view name="left"></router-view>
    <router-view name="right"></router-view>
</template>

module1.js

export class Module1 {
    activate(params: Object, routeConfig: Object, instruction: NavigationInstruction): void {
        //which view port am I being rendered in?
    }
}

Answer 1

My solution was to lookup the navigation instruction's viewport instruction object and compare if it is the very same object instance. I've created a convinient method for doing so.

navigation-instruction-extension.js

import {NavigationInstruction} from 'aurelia-router';

NavigationInstruction.prototype.viewPortFor = function(viewModelInstance: Object): string {
    for (let key in this.viewPortInstructions) {
        let vpi = this.viewPortInstructions[key];
        if (vpi.component.viewModel === viewModelInstance)
            return key;
    }
    return undefined;
}

module1.js

import 'navigation-instruction-extension.js';

export class Module1 {
    activate(params: Object, routeConfig: Object, instruction: NavigationInstruction): void {
        instruction.viewPortFor(this); //returns either 'left' or 'right'
    }
}