Aurelia: Templating. Fügen Sie eine Vorlage in einem anderen

Question

Ich möchte zwei Layouts für meine Aurelia App verwenden. Home - FAQ - Anmeldeseite enthält keine Seitenleiste; Aber alles andere enthält diese Seitenleiste.

Meine Architektur, mit einer Sidebar ist ziemlich kompliziert in HTML und ist wie:

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

So kann ich nicht einfach aktivieren oder den Sidebar deaktivieren, da sie die Ansicht enthält. Ich muss zwei Seiten wie "app.html" erstellen, die in main.js definiert sind, aber wie kann ich Aurelia sagen "Wähle app.html für diese Seite und app2.html für diese andere Seite"?

ich die SetRoot Funktion gefunden zu haben, aber ich habe Fehler mit ihm (die Strecken nicht richtig funktionieren, wenn ich SetRoot ändern) Vielen Dank für Ihre Antworten

Answer 1

Der Router unterstützt das Konzept des „Layouts“. Dies wird hier dokumentiert: http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/10

Grundsätzlich Sie für jede Strecke ein Layout festlegen (können Sie ein Standard-Layout auf dem router-view benutzerdefinierte Element angeben:

app.html

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

App .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; 
    } 
} 

Layout-mit-seitenleiste.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> 

Layout-ohne-seitenleiste.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> 

no-seitenleiste.html

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