emberjs dropdown example

dropdown-menu.js

import Ember from "ember";

export default Ember.Component.extend({
  tagName: 'nav',
  classNames: ['navDropdown'],
  classNameBindings: ['isDropdownVisible:is--open'],
  ariaRole: 'navigation',

  isDropdownVisible: false,

  actions: {
    toggleNavigationDropdown: function() {
      this.toggleProperty('isDropdownVisible');
    }
  },

  attachClickHandler: function() {
    var component = this;

    Ember.$(window).on("click." + component.elementId, function(e) {
      if(!Ember.$.contains(component.element, e.target)) {
        component.set('isDropdownVisible', false);
      }
      return true;
    });
  }.on('didInsertElement'),

  detachClickHandler: function() {
    Ember.$(window).off("click." + this.elementId);
  }.on('willDestroyElement'),
});