Aurelia - 哪個視口是渲染的視圖模型？

我有一個雙列布局設置，兩列具有非常相似的功能，所以相同的視圖模型正在被重用。 Hovewer，渲染可能會略有不同，取決於渲染哪一面，所以想知道如何訪問視圖端口信息？Aurelia - 哪個視口是渲染的視圖模型？

考慮此設置：

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

來源

2017-02-13 balazska

我的解決方案是查找導航指令的視口指令對象，並比較它是否是完全相同的對象實例。我已經創建了一個方便的方法。

導航指令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' 
    } 
}

來源

2017-02-13 19:10:42 balazska

似乎應該有更好的方法，但我只花了30分鐘嘗試，並且無法在傳遞給'activate（）'函數的參數中找到簡單的答案。 – LStarky

我試圖找出，這是迄今爲止最好的解決方案。 – balazska

最好的方法是將它作爲參數發送到框架的activate（）中。我會爲此創建一個PR – balazska

我添加了一個新的拉動請求，發佈新版本時，視口的名字將通過正常生命週期參數訪問：

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

來源

2017-05-05 13:15:02 balazska

Aurelia - 哪個視口是渲染的視圖模型？

回答

相關問題