ReefPointsBlog

Adding route specific body class tags in Ember

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