Question

在我的应用中，我有一个home页面。这个主页有2个孩子service和contact。现在主页有共同的标题。（它也需要其他子页面），当子页面加载时，我需要将部分标题模板加载到它们自己的页面。

而且，我还要求在不同的hbs中维护子页面标题。怎么做到这一点？

这是我的尝试：

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

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

service-header.hbs模板

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

请看一下这个modified twiddle of yours。

如何将部分模板保存在单独的页面中并根据子页面进行切换

1 个答案: