Aurelia - 哪个视图端口是呈现的视图模型？

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

Answer 2

I've added a new Pull Request, when new version is released, the viewport's name will be accessible through regular lifecycle parameters:

activate(params: Object, routeConfig: Object, instruction: NavigationInstruction): void {
    routeConfig.currentViewPort //the name of current viewport
}