Javascript Aurelia-视图模型在哪个视图端口中渲染?

Javascript Aurelia-视图模型在哪个视图端口中渲染?,javascript,aurelia,aurelia-templating,Javascript,Aurelia,Aurelia Templating,我有一个两列布局设置,这两列具有非常相似的功能,因此正在重用非常相同的视图模型。Hovewer,渲染可能会略有不同,这取决于渲染的是哪一侧,因此想知道如何访问视图端口信息 考虑以下设置: app.js app.html 我的解决方案是查找导航指令的视口指令对象,并比较它是否是同一个对象实例。我已经创建了一个方便的方法 navigation-instruction-extension.js 模块1.js 我添加了一个新的拉取请求,当发布新版本时,可以通过常规生命周期参数访问视口的名称: activ

我有一个两列布局设置,这两列具有非常相似的功能,因此正在重用非常相同的视图模型。Hovewer,渲染可能会略有不同,这取决于渲染的是哪一侧,因此想知道如何访问视图端口信息

考虑以下设置:

app.js

app.html


我的解决方案是查找导航指令的视口指令对象,并比较它是否是同一个对象实例。我已经创建了一个方便的方法

navigation-instruction-extension.js

模块1.js


我添加了一个新的拉取请求,当发布新版本时,可以通过常规生命周期参数访问视口的名称:

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

似乎应该有更好的方法,但我只是花了30分钟尝试,在传递给
activate()
函数的参数中找不到简单的答案。我试图找到,这是迄今为止最好的解决方案。最好的方法是让框架将其作为
activate()
中的参数发送。我将为此创建一个PR
<template>
    <router-view name="left"></router-view>
    <router-view name="right"></router-view>
</template>
export class Module1 {
    activate(params: Object, routeConfig: Object, instruction: NavigationInstruction): void {
        //which view port am I being rendered in?
    }
}
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;
}
import 'navigation-instruction-extension.js';

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