Setting page title with ember.js

Question

What is the best way to set the page's title, so that when transitioning between urls, the title will reflect the new state? Is there a way to set the Router to do this?

I want a method that allows me to set a page title schema for each state. So, if the route has parameters, they will be passed into the pageTitle:

sessions : Ember.Route.extend({
       route:"/sessions",
       connectOutlets : function(router) {
           //...
       },
       pageTitle:function(){
            return "Sessions";
       },
   })

I'm open to any suggestions as to how it is best to implement this type of functionality on the Model or someplace else.

Answer 1

The previous answer was applicable for an old version of Ember. After several changes the Framework has reached version 1.0 RC2 and it's close to be final, so I decided to update this answer.

As an example, please look into the Routes defined in this fiddle: http://jsfiddle.net/schawaska/dWcUp/

The idea is the same as the previous answer, just in a different way since the Routing API has changed considerably.

The Route below, uses the activate hook to set the title of the document via jQuery:

App.ProductRoute = Em.Route.extend({
    activate: function() {
        $(document).attr('title', 'Auto Web Shop - Product');
    }
});

Edit: As noted in the comment section:

FYI activate is the API method, rather than enter – pauldechov

---

This answer was given in a previous version of Ember and it no longer applies.

Inside your connectOutlets you can do something as simple as using jQuery to modify the document's title attribute:

[...]
home: Em.Route.extend({
    route: '/',
    connectOutlets: function (router, context) {                
        // router.set('navbarController.selected', 'home');                     
        router.get('applicationController')
              .connectOutlet('home');                     

        $(document).attr('title', 'YOUR TITLE GOES HERE');
    }
}),                
[...]

But you'd have to do this for every route.

In case you have something like a navbar controller that sets the selected nav menu item, you watch the selected property to both bind the "active" or "selected" css class to the nav item and set the page title; or you could have a property just for the title on the navitem model that you'd pass through the context (but I believe you'd have to handle this in the view and transition to the route from there).

Anyway, this is just to show one of the possible ways to set the page title.

EDIT: I've modified an existing fiddle to do that. Take a look at the method navigateTo in the router: http://jsfiddle.net/schawaska/hEx84/ (to see it running go here http://jsfiddle.net/schawaska/hEx84/show/)

Answer 2

As I struggled a lot to figure out a nice pattern to setup the page title, with the lastest Ember.js (1.0.0 RC7), I decided to create a subclass of Ember.Route:

AppRoute = Ember.Route.extend({
    renderTemplate: function(controller, model) {
        this.render();

        var pageTitle = this.title ? this.title(controller, model) : null;
        document.title = pageTitle ? pageTitle : "Default Title";
    }
});

// all routes extend this new 'AppRoute'

App.PageRoute = AppRoute.extend({
    model: function(params) {
        // return your model
        return App.Page.find(params.page_id);
    },
    title: function(controller, model) {
        // return whatever should be your page title
        return controller.get('title');
    },
});

Probably this will be natively supported by Ember.js if this pull request is merged: Router now observes the 'title' property on route handlers and sets document.title. Note: this pull request doesn't seem to pass controller and model as parameters.

If you prefer the Coffee Script equivalent: Ember.js: An easy and clean way to set the page title.

Answer 3

I took this approach:

Ember.Route.reopen({
    enter: function(router) { 
        this._super(router)

        # Set page title
        name = this.parentState.get('name')
        if (!Em.none(name)) {
            capitalizedName = name.charAt(0).toUpperCase() + name.slice(1)
            $(document).attr('title', "Website - " + capitalizedName)
        }
   }
})

A few issues came up with using navigateTo, this ended up being more reliable and cleaner for my situation at least.