Aurelia：模板。包含另一個模板

我想爲我的Aurelia應用程序使用兩種佈局。首頁 - 常見問題 - 登錄頁面不包含側邊欄; 但其他一切都包含此邊欄。Aurelia：模板。包含另一個模板

我的架構，與側邊欄是相當複雜的HTML和像：

div.container 
    div.sidebar 
    div.sidebar_content 
    div.site_content

，所以我不能只是啓用或禁用側邊欄，因爲它包含的視圖。我必須製作兩個頁面，如main.js中定義的「app.html」，但如何告訴Aurelia「爲此頁選擇app.html，爲此頁選擇app2.html」？

我已經找到了setRoot功能，但我有它的錯誤（當我改變setroot路由不能正常工作）謝謝你的答案

來源

2017-02-27 Guillaume Normand

路由器支持的理念，以「佈局」。這是記錄在這裏：

app.html

<router-view layout-view="./layout-with-sidebar.html"></router-view>

應用：http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/10

基本上，你指定每個路線的佈局（您可以在router-view自定義元素上指定一個默認佈局.js文件

export class App { 
    configureRouter(config, router) { 
    config.title = 'Aurelia'; 
    var model = { 
     id: 1 
    }; 
    config.map([ 
     { route: ['home', ''], name: 'home', title: "Home", moduleId: 'home', nav: true }, 
     { route: 'no-sidebar', name: 'no-sidebar', title: "No Sidebar", moduleId: 'no-sidebar', nav: true, layoutView: 'layout-without-sidebar.html' } 
    ]); 
    this.router = router; 
    } 
}

佈局與 - sidebar.html

<template> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-sm-2"> 
     <slot name="sidebar"></slot> 
     </div> 
     <div class="col-sm-10"> 
     <slot name="main-content"></slot> 
     </div> 
    </div> 
    </div> 
</template>

佈局，而無需-sidebar.html

<template> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-sm-12"> 
     <slot name="main-content"></slot> 
     </div> 
    </div> 
    </div> 
</template>

home.html做爲

<template> 
    <div slot="sidebar"> 
    <p>I'm content that will show up on the right.</p> 
    </div> 
    <div slot="main-content"> 
    <p>I'm content that will show up on the left.</p> 
    </div> 
</template>

無sidebar.html

<template> 
    <div slot="main-content"> 
    <p>Look ma! No sidebar!</p> 
    </div> 
</template>

來源

2017-02-27 16:31:21

Aurelia：模板。包含另一個模板

回答

相關問題