Document title mixin for Ember.Router

document_title.js

import Ember from "ember";

var get = Ember.get;
var copy = Ember.copy;
var removeObserver = Ember.removeObserver;
var addObserver = Ember.addObserver;

var DocumentTitleMixin = Ember.Mixin.create({

  titleTokensDidChange: function () {
    this.notifyPropertyChange('titleTokens');
  },

  titleTokens: function () {
    var currentHandlerInfos = get(this, 'router.currentHandlerInfos'),
        tokens = [],
        token;

    if (currentHandlerInfos) {
      for (var i = 0, len = currentHandlerInfos.length; i < len; i++) {
        token = get(currentHandlerInfos[i], 'handler.title');
        if (token) {
          tokens.push(token);
        }
      }
    }

    return tokens;
  }.property(),

  titleDivider: '|',

  titleSpecificityIncreases: true,

  title: function () {
    var tokens = get(this, 'titleTokens'),
        divider = get(this, 'titleDivider');

    divider = ' ' + divider + ' ';

    if (!get(this, 'titleSpecificityIncreases')) {
      tokens = copy(tokens).reverse();
    }

    return tokens.join(divider);
  }.property('titleTokens', 'titleDivider', 'titleSpecificityIncreases'),

  titleDidChange: function () {
    var title = get(this, 'title');

    if (title) {
      document.title = title;
    }
  }.observes('title').on('init'),

  willTransition: function () {
    var oldInfos = get(this, 'router.currentHandlerInfos');

    if (oldInfos) {
      for (var i = 0, len = oldInfos.length; i < len; i++) {
        removeObserver(oldInfos[i].handler, 'title', this, this.titleTokensDidChange);
      }
    }
  },

  didTransition: function (infos) {
    for (var i = 0, len = infos.length; i < len; i++) {
      addObserver(infos[i].handler, 'title', this, this.titleTokensDidChange);
    }

    this.notifyPropertyChange('titleTokens');

    return this._super(infos);
  },

  _setupRouter: function (router, location) {
    var emberRouter = this;
    router.willTransition = function (infos) {
      emberRouter.willTransition(infos);
    };

    this._super(router, location);
  }
});

export default DocumentTitleMixin;

This is great. I tried adding an initializer to inject this into all instances of route, just so I didn't have to include it in every route file, but no luck. Any thoughts on how to do that?

You dont want to include it in every route, what you want to do is extend the Router. Your code should look something like:

import Ember from 'ember';
import DocumentTitleMixin from 'document-title-mixin'; //will change depending on your setup

var Router = Ember.Router.extend(DocumentTitleMixin, {
    titleDivider: '-',
    titleSpecificityIncreases: false,
});

Hopefully that helps.

@tim-evans can you host this as a repo instead so we can bower this bad boy?

Hi, thanks so much. I'm having some trouble understanding what specificyIncrease does and how to use model data with the mixin. How would you use this mixin with a pattern as:

PostsRoute > "Posts - My site"
PostRoute > "Post title - My site"

@jayphelps - sure!

Look here for further information: https://github.com/paddle8/ember-document-title

I might turn this into an ember-cli addon as well