Sane Document Title
This addon adds sane document.title
integration to your ember app.
Originally based on this gist by @machty, and since improved upon by many fabulous contributors.
Tested to work with Ember 1.13.13 and up.
Install
Install by running
ember install ember-cli-document-title
So, how does this work?
This adds two new keys to your routes:
titleToken
title
They can be either strings or functions.
Every time you transition to a route, the following will happen:
- Ember will collect the
titleToken
s from your leafmost route and bubble them up until it hits a route that hastitle
defined.titleToken
is the name of the route's model by default. - If
title
is a string, that will be used as the document title - If
title
is a function, the collectedtitleToken
s will be passed to it in an array. - What is returned from the
title
function is used as the document title.
Examples!
Simple, static titles
If you just put strings as the title
for all your routes, that will be
used as the title for it.
// routes/posts.js
export default Ember.Route.extend({
title: 'Our Favorite posts!'
});
// routes/post.js
export default Ember.Route.extend({
title: 'Please enjoy this post'
});
Dynamic segments with a static part
Let's say you want something like "Posts - My Blog", with "- My Blog" being static, and "Posts" being something you define on each route.
// routes/posts.js
export default Ember.Route.extend({
titleToken: 'Posts'
});
This will be collected and bubble up until it hits the Application Route
// routes/application.js
export default Ember.Route.extend({
title: function(tokens) {
return tokens.join(' - ') + ' - My Blog';
}
});
Dynamic title based on model info
In this example, we want something like "Name of current post - Posts - My Blog".
Let's say we have this object as our post-model:
Ember.Object.create({
name: 'Ember is Omakase'
});
And we want to use the name of each post in the title.
// routes/post.js
export default Ember.Route.extend({
titleToken: function(model) {
return model.get('name');
}
});
This will then bubble up until it reaches our Posts Route:
// routes/posts.js
export default Ember.Route.extend({
titleToken: 'Posts'
});
And continue to the Application Route:
// routes/application.js
export default Ember.Route.extend({
title: function(tokens) {
tokens = Ember.makeArray(tokens);
tokens.unshift('My Blog');
return tokens.reverse().join(' - ');
}
});
This will result in these titles:
- On /posts - "Posts - My Blog"
- On /posts/1 - "Ember is Omakase - Posts - My Blog"
ember-cli-head
Use with Using ember-cli-document-title
with ember-cli-head
is very straight forward and allows you to use the wonderful route based declaritive API for
title
and still easily add other things to the document's <head>
(i.e. meta
tags).
Only a few tweaks are needed to use both of these addons together:
- Install both addons:
ember install ember-cli-head
ember install ember-cli-document-title
- Add
headData
andsetTitle
to yourapp/router.js
:
const Router = Ember.Router.extend({
location: config.locationType,
headData: Ember.inject.service(),
setTitle(title) {
this.get('headData').set('title', title);
}
});
-
Remove
<title>
from yourapp/index.html
. -
Update
app/templates/head.hbs
(added by ember-cli-head):