CODEWITHSUNDEEP
javascriptember.jsyeoman
Broncha
Broncha

Reputation: 3794

Handling page header in ember.js

I am trying to make a simple app using Ember.js. I am using yeoman ember.

I have following application template

<h1>Dashboard</h1>
<div class="content">{{outlet}}</div>

I have a few routes defined. Now what I am not being able to do is, find a way to update the text inside <h1> for different routes. For example,

if I navigate to /#/users I need it to change to Users. if I navigate to /#/users/1 I need it to change to the model's firstname.

I tried this in ApplicationRoute

setupController: function(controller){
    controller.set('title', 'Dashboard');
}

and changing to <h1>{{title}}</h1> but it only works for ApplicationRoute and no other route!

setupController: function(controller){
    controller.set('title', 'Users');
}

This does not work in UsersRoute. Even the output of the route disappears.

What is the right approach to get this to work!

Upvotes: 0

Views: 258

Answers (1)

Deewendra Shrestha
Deewendra Shrestha

Reputation: 2465

How about you simply create an action in ApplicationRoute that sets the title as passed to it as an argument, and then have your sub route call that action in setupController. That should do the trick. So in you application route:

//in application route 
actions:{
    updatePageTitle: function(title){
        this.controllerFor('application').set('title', title);
    }
}

And in your individual child route:

setupController:function(controller, model){
    this.send('updatePageTitle', model.get('something'));
    this._super(controller, model);
}

Upvotes: 1

Related Questions