layout - Aurelia:模板化。在另一个模板中包含一个模板

Question

我想为我的 Aurelia 应用程序使用两种布局。主页 - 常见问题解答 - 登录页面不包含侧边栏；但是其他所有东西都包含这个侧边栏。

我的带有侧边栏的架构在 HTML 中非常复杂，就像:

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

所以我不能只启用或禁用边栏，因为它包含 View 。我必须制作两个页面，如在 main.js 中定义的“app.html”，但是如何告诉 Aurelia“为此页面选择 app.html，为其他页面选择 app2.html”？

我找到了 setRoot 函数，但我有一些错误(当我更改 setroot 时，路由无法正常工作)谢谢你的回答

Answer 1

路由器支持“布局”的概念。这记录在这里:http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/10

基本上，您为每个路由指定一个布局(您可以在 router-view 自定义元素上指定一个默认布局:

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-with-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>

layout-without-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>

no-sidebar.html

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