aurelia应用程序中的两种不同布局
提问于 2016-07-22 10:13:59
我想用两个单独的布局为我的aurelia应用程序。他们之间的区别是，一个没有侧边栏。目前，我正在使用一个布局文件，定义如下：
<template>
<div class="container">
<router-view></router-view>
</div>
</template>如果一个活动路径需要这个侧边栏出现，我只是把它放到它的视图中。我想要实现的是添加另一个布局，在默认情况下具有这个侧边栏：
<template>
<require from="../common/elements/sidemenu/sidemenu"></require>
<div class="container">
<sidemenu></sidemenu>
<router-view></router-view>
</div>
</template>所以问题是-怎么做？一个aurelia应用程序是否有可能有多个布局(或者母版页，不管你怎么称呼它们)？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-07-22 12:36:25
使用aurelia.setRoot()
您可以通过在configure中指定带有index.html指令的脚本来手动设置应用程序。通常，这是设置为main。
index.html
<body aurelia-app="main">在此脚本中，可以使用aurelia.setRoot('root')指定根视图模型。如果没有提供参数，则约定使用'app'。
main.js
aurelia.start().then(() => aurelia.setRoot());但是，您可以在应用程序中的任何地方注入aurelia对象，并在任何时候调用setRoot函数来加载不同的根视图模型。
home.js
@inject(aurelia)
export class HomeViewModel {
constructor(aurelia) {
this.aurelia = aurelia;
}
doStuff() {
this.aurelia.setRoot('withSidebar');
}
}其中一个常见的用例是有一个登录页面，我已经为这个用例创建了一个完整的模板，您可以在这里查看、克隆或分叉：http://davismj.me/portfolio/sentry/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38532921
复制相关文章
腾讯云开发者
