Aurelia：模板。在另一个中包含一个模板答案

【问题标题】：Aurelia: templating. Include a template in anotherAurelia：模板。在另一个中包含一个模板
【发布时间】：2017-02-27 15:02:39
【问题描述】：

我想为我的 Aurelia 应用使用两种布局。主页 - 常见问题 - 登录页面不包含侧边栏；但其他所有内容都包含此侧边栏。

我的带有侧边栏的架构在 HTML 中非常复杂，如下所示：

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

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

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

【问题讨论】：

标签： layout aurelia templating

【解决方案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>

【讨论】：