Skip to content

Instantly share code, notes, and snippets.

@rohmann
Created September 14, 2016 18:50
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rohmann/1df36a63f2c3905bc52ae373e771a129 to your computer and use it in GitHub Desktop.
Save rohmann/1df36a63f2c3905bc52ae373e771a129 to your computer and use it in GitHub Desktop.
Add class to Ember Application (after 2.7.0)
// instance-initializers/app-view.js
// With an instance initializer, we can register a component for Ember to use at the top level.
// Not ideal, but it works in the meantime until routable components drop.
import Ember from 'ember';
const AppView = Ember.Component.extend({
classNames: ['my-app'],
});
export function initialize( appInstance ) {
appInstance.register('view:toplevel', AppView);
}
export default {
name: 'app-view',
initialize
};
@linearza
Copy link

After some back and forth it seems that this implementation no longer works on 2.10.0-beta.2

@sandstrom
Copy link

sandstrom commented Dec 3, 2016

If it's only needed to set a class based on the route (that was my use-case) this may do as an alternative:

import Ember from 'ember';

const NAME_SUFFIX = '-route';

export default Ember.Controller.extend({

  _updateRouteClass: function() {
    let routeName = this.get('currentRouteName');

    if (routeName) {
      let name = routeName.dasherize().replace(/\./g, '-') + NAME_SUFFIX;
      let bodyEl = document.querySelector('body');

      Array.from(bodyEl.classList).forEach((klass) => {
        if (klass.endsWith(NAME_SUFFIX)) {
          bodyEl.classList.remove(klass);
        }
      });

      bodyEl.classList.add(name);
    }
  }.observes('currentRouteName').on('init'),

});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment