CODEWITHSUNDEEP
ember.js
3gwebtrain
3gwebtrain

Reputation: 15303

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

In my app, I have a home page. this home page has 2 child as service and contact. now the home page have common header. ( it requires other child pages too ) and when child page loads i require to load the partial header template to their own.

And also, I require to maintain the child page headers in separate hbs too. How to achieve this?

here is my try :

<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

Upvotes: 1

Views: 41

Answers (1)

Ahmet Emre Kilinc
Ahmet Emre Kilinc

Reputation: 6895

You can use named outlets like this:

service.js route

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

service.js controller

mypasseddata: 'my passed service data'

home.hbs

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

{{outlet}}

service-header.hbs template

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

Please, take a look at this modified twiddle of yours.

Upvotes: 1

Related Questions