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

score 2 · Accepted Answer · answered Feb 13 '17 at 19:10

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

It seems like there should be a better way but I just spent 30 minutes trying and couldn't find the simple answer in the parameters passed to the `activate()` function. — LStarky, Feb 14 '17 at 03:20
The best would be to have it sent as a parameter in `activate()` by the framework. I'll create a PR for this — balazska, Feb 20 '17 at 07:45

score 0 · Answer 2 · answered May 05 '17 at 13:15

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
}

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

2 Answers2