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;

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