如何将部分模板保留在单独的页面中并根据 child 页面切换

Question

在我的应用程序中，我有一个 home 页面。此主页有 2 child 作为 service 和 contact。现在首页有common header。（它也需要其他 child 页面）并且当 child 页面加载时，我需要将部分 header 模板加载到它们自己的模板中。

此外，我还需要在单独的 hbs 中维护 child 页面 header。如何实现？

这是我的尝试：

<header>
    <h2>Home page header </h2>
  <p class="service">Partial content for Service to be maintained in separate hbs file </p>
    <p class="contact">Partial content for contact to be maintained in separate page </p>
</header>

{{outlet}}

Twiddle here

Answer 1

您可以这样使用 named outlets：

service.js路线

renderTemplate: function() {
    // Render default outlet   
    this.render();
    // render extra outlets
    this.render("service-header", {
        outlet: "header",
        into: "home"
    });
}

service.js 控制器

mypasseddata: 'my passed service data'

home.hbs

<header>
    <h2>Home page header </h2>
  {{outlet 'header'}}
</header>

{{outlet}}

服务-header.hbs模板

{{yield}}
    <p class="service">Partial content for Service to be maintained in separate hbs file </p>
{{mypasseddata}}

请看一下这个modified twiddle of yours。

如何将部分模板保留在单独的页面中并根据 child 页面切换

How to keep partial templates in separate page and switch according to child page

ember.js