Changing the body class for a specific route

1

I need to change the body class in my admin route. I saw this post from the Dockyard folks on the subject but can’t quite get it to adapt.

Basically if I’m in the admin template I want to change the app style to something that let’s the user know they are outside the normal realms of the app. If they are not in the admin template then I need to set the standard body style

if (isAdminTemplate) {
   Ember.$('body').cssClass('admin');
} else {
   Ember.$('body').cssClass('normal');
}

Seems that Route.activate and Route.deactivate is the right place to handle this but I haven’t quite gotten it figured out.

2

Is it a matter of whether they are hovering over the admin template, or are they inside a route called admin?

3

Inside a route called admin. Sorry for the confusion!

The route structure is

// Admin route that needs different class
this.resource('admin', function () {
   // child routes
}

// standard route that can use the normal class
this.resource('orders', function () {
   // child routes 
}
4

Maybe the best way to do it in your case is something like this

   // app/routes/admin.js
    
  import Ember from "Ember";

  export default Ember.Route.extend({
      activate: function(){
        Ember.$('body').toggleClass("admin")
      },
      deactivate: function(){
        Ember.$('body').toggleClass("admin")
      }
  })

Since you only toggle between two states right now, you can handle it within your AdminRoute. If you need/want to expand the solution you can do something like in that post. The right place to put it will probably depend on how you set things up in your app though. You know best, but I’d guess put it close to where you declared your Router is a good starting place.

5

@ulisesrmzroche I swear I had tried overriding activate and deactivate in the admin route and kept getting errors. It’s working like a champ now - you must have some good karma :smile: Thanks!

6

Lol, right on! :thumbsup: I remember watching a presentation that may help, but can’t remember it off the top of my head. If I can think of it, I’ll post again.

7

That post can be optimized to something like:

import Ember from 'ember';
export default Ember.Route.reopen({
  activate: function() {
    this._super();
    Ember.$('body').attr('class', this.routeName.replace(/\./g, '-').dasherize());
  }  
});

What left some curiosity is: is the default class body “ember-application” needed in any ways by Ember? Because i removed it and all seems to be fine.