Javascript aurelia应用程序中的两种不同布局_Javascript_Html_Aurelia

Javascript aurelia应用程序中的两种不同布局

javascript html aurelia

Javascript aurelia应用程序中的两种不同布局,javascript,html,aurelia,Javascript,Html,Aurelia,我想为我的aurelia应用程序使用两种不同的布局。它们之间的区别在于没有侧边栏。目前，我使用的布局文件定义如下： <template> <div class="container"> <router-view></router-view> </div> </template> 如果一条活动路线需要这个侧边栏出现，我只是把它放到它的视图中。我想实现的是添加另一个布局，默认情况下会有此侧

我想为我的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（）

通过在

index.html

中指定带有

configure

说明的脚本，可以手动设置应用程序。通常，这设置为

main

index.html

<body aurelia-app="main">

但是，您可以将

aurelia

对象注入应用程序中的任何位置，并随时调用

setRoot

函数以加载不同的根视图模型

home.js

aurelia.start().then(() => aurelia.setRoot());

@inject(aurelia)
export class HomeViewModel {
    constructor(aurelia) {
        this.aurelia = aurelia;
    }
    doStuff() {
        this.aurelia.setRoot('withSidebar');
    }
}

一个常见的用例是有一个登录页面，我为这个用例创建了一个完整的模板，您可以在这里查看、克隆或分叉：

use

aurelia.setRoot（）

通过在

index.html

中指定带有

configure

说明的脚本，可以手动设置应用程序。通常，这设置为

main

index.html

<body aurelia-app="main">

但是，您可以将

aurelia

对象注入应用程序中的任何位置，并随时调用

setRoot

函数以加载不同的根视图模型

home.js

aurelia.start().then(() => aurelia.setRoot());

@inject(aurelia)
export class HomeViewModel {
    constructor(aurelia) {
        this.aurelia = aurelia;
    }
    doStuff() {
        this.aurelia.setRoot('withSidebar');
    }
}

一个常见的用例是有一个登录页面，我已经为这个用例创建了一个完整的模板，您可以在这里查看、克隆或分叉：

非常感谢！那正是我想要的。谢谢你的爱。事实上，我还有一个问题。当viewmodel加载时，我想

setRoot

。如果我在构造函数或

activate

方法中执行此操作，我会得到

在…

的视图中找不到路由器视图。在

attached

或

created

方法中执行此操作将启动无休止的递归。如何解决这个问题？：）这种行为对我来说是有道理的。加载时不应设置根目录。你应该在之前或之后做这件事。这确实有道理。然而问题是——哪一个地方是最好的地方？我想我可以订阅

路由器：导航：成功

活动，但也许有更好的方法吗？非常感谢！那正是我想要的。谢谢你的爱。事实上，我还有一个问题。当viewmodel加载时，我想

setRoot

。如果我在构造函数或

activate

方法中执行此操作，我会得到

在…

的视图中找不到路由器视图。在

attached

或

created

router:navigation:success

event，但也许有更好的方法？