Adding route specific body class tags in Ember

By: Brian Cardarella

Our designer likes to use body class tags depending upon the context of the app he is designing. We're currently building an Ember app and this is how I got it working:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Ember.Route.reopen({
  activate: function() {
    var cssClass = this.toCssClass();
    // you probably don't need the application class
    // to be added to the body
    if (cssClass != 'application') {
      Ember.$('body').addClass(cssClass);
    }
  },
  deactivate: function() {
    Ember.$('body').removeClass(this.toCssClass());
  },
  toCssClass: function() {
    return this.routeName.replace(/\./g, '-').dasherize();
  }
});