Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
document.title integration in ember
// Extend Ember.Route to add support for sensible
// document.title integration.
// `titleToken` can either be a static string or a function
// that accepts a model object and returns a string (or array
// of strings if there are multiple tokens).
titleToken: null,
// `title` can either be a static string or a function
// that accepts an array of tokens and returns a string
// that will be the document title. The `collectTitleTokens` action
// stops bubbling once a route is encountered that has a `title`
// defined.
title: null,
// Provided by Ember
_actions: {
collectTitleTokens: function(tokens) {
var titleToken = this.titleToken;
if (typeof this.titleToken === 'function') {
titleToken = this.titleToken(this.currentModel);
if (Ember.isArray(titleToken)) {
tokens.unshift.apply(this, titleToken);
} else if (titleToken) {
// If `title` exists, it signals the end of the
// token-collection, and the title is decided right here.
if (this.title) {
var finalTitle;
if (typeof this.title === 'function') {
finalTitle = this.title(tokens);
} else {
// Tokens aren't even considered... a string
// title just sledgehammer overwrites any children tokens.
finalTitle = this.title;
// Stubbable fn that sets document.title
} else {
// Continue bubbling.
return true;
updateTitle: function() {
this.send('collectTitleTokens', []);
setTitle: function(title) {
if (Ember.testing) {
this._title = title;
} else {
window.document.title = title;

This comment has been minimized.

Copy link

oskarrough commented Jan 19, 2014

Thank you very much for this. I'm trying to understand how to use it.

Say I want a title format of 'Current model title - Company name'. How would I achieve this exactly?


This comment has been minimized.

Copy link

bschaeffer commented Apr 10, 2014


// Load document-title-router.js

App.ApplicationRoute = Ember.Route.extend({
  title: function(tokens) { 
    return tokens.join(' ') + ' - Current Company';

App.CoolRoute = Ember.Route.extend({
  titleToken: function(model) {
    return model.get('title');

Visit /cool, load Ember.Object.create({title: 'Slammin'}), get Slammin - Current Company.


This comment has been minimized.

Copy link

kimroen commented Jul 6, 2014

If you have an ember-cli application, this can now be included in it by running npm install ember-cli-document-title --save-dev.

Here's the repo with some more examples of how to use it.

Thanks again for making this!


This comment has been minimized.

Copy link

bsclifton commented Nov 4, 2014

Just discovered this- thanks @machty for creating this and big thanks @kimroen for documenting and packaging it 😄


This comment has been minimized.

Copy link

grapho commented Dec 1, 2014


Love it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.