Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
document.title integration in ember
// Extend Ember.Route to add support for sensible
// document.title integration.
Ember.Route.reopen({
// `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) {
tokens.unshift(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
this.router.setTitle(finalTitle);
} else {
// Continue bubbling.
return true;
}
}
}
});
Ember.Router.reopen({
updateTitle: function() {
this.send('collectTitleTokens', []);
}.on('didTransition'),
setTitle: function(title) {
if (Ember.testing) {
this._title = title;
} else {
window.document.title = title;
}
}
});
@oskarrough

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?

@bschaeffer

This comment has been minimized.

Copy link

bschaeffer commented Apr 10, 2014

@oskarrough:

// 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.

@kimroen

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!

@bsclifton

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 😄

@grapho

This comment has been minimized.

Copy link

grapho commented Dec 1, 2014

+1

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.