Toolroom Tech Blog

Devlopers Digest

Route specific CSS in Ember.js

Often we want to use route specific css in our apps. In Ember you can simply make the route itself responsible to add css classes to your Body.

Often we want to use route specific css in our apps. In Ember you can simply make the route itself responsible to add css classes to your body.

Ember.Route.reopen({
  activate: function() {
      Ember.$('body').addClass(this.get('routeClassName'));
  },
  deactivate: function() {
      Ember.$('body').removeClass(this.get('routeClassName'));
  },
  routeClassName: function() {
      var routeClassName = this.routeName.replace(/\./g, '-').dasherize();
      //Instead of the application route name we use the app name
      if(routeClassName === 'application') {
          routeClassName = 'dweedo';
      }
      return routeClassName;
  }.property('routeName')
});

Comments (1) -

  • Tamekia Lay

    07.12.2014 22:04:29 | Reply

    Thanks for helping out, good info .

Loading