CODEWITHSUNDEEP
javascriptember.jshandlebars.js
Andre Gallo
Andre Gallo

Reputation: 2269

bind values to application.hbs from different routes

In Ember.js (version 2.5.1), I have the following code in my application.hbs:

<div class="content-wrapper">
    <section class="content-header">
        <h1>
            {{title}}<small>{{description}}</small>
        </h1>
    </section>
    <section class="content">
        {{outlet}}
    </section>
</div>

Where should I declare {{title}} and {{description}} properties so they can change depending on the current route? I thought of generating an application controller (ember g controller application) which works fine for the index route, however, I am unable to change these properties if I navigate to other routes in my application.

Upvotes: 2

Views: 142

Answers (1)

kristjan reinhold
kristjan reinhold

Reputation: 2048

I would design my application.hbs like this

    {{partial "app_navbar"}}
        <div class="container">
           {{outlet}}
        </div>
    {{partial "app_footer"}}

And to create a route dependent header i would make a component content-header

templates/components/content-header.hbs

<div class="content-header">
   <h1> {{params.title}} - <small> {{params.description}} </small> </h1>
</div>

And in your custom route's controllers

export default Ember.Controller.extend({
    navbarParams: {
       title: 'Foo',
       description: 'Bar'
    }
});

And in your custom route's template

{{content-header params=navbarParams}}

{{! Your other content here}}

Upvotes: 0

Related Questions