document.title integration in ember

document-title-router.js

// 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;
    }
  }
});

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?

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

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!

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

+1

Love it