Aurelia - какой порт просмотра является визуализируемой моделью?

Question

У меня есть двухстоечная компоновка, два столбца имеют очень схожие функциональные возможности, поэтому та же самая модель просмотра используется повторно. Hovewer, рендеринг может немного отличаться в зависимости от того, на какой стороне он отображается, поэтому интересно, как можно получить доступ к информации о портах просмотра?

Рассмотрим эту установку:

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

Мое решение состояло в том, чтобы найти объект инструкции вида просмотра инструкции навигации и сравнить, является ли это тем же самым экземпляром объекта. Я создал удобный метод для этого.

навигационно-инструкция-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

Я добавил новый запрос Толкай, когда выпущена новая версия, имя окна просмотра будут доступны через регулярные параметры жизненного цикла:

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