Mar*_* M. 1 html javascript aurelia
我想为我的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应用程序来设置多个布局(或主页,但是你可以称之为)？
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/