Naming Mixins with Ember-CLI

Question

I have an ember addon which uses several Mixins to provide its functionality. Unfortunately when I look at this object in the Ember Inspector I get a boat load of "unknown mixin" buckets where my state is scattered across:

I'm ok with there being a lot of "buckets" but I'd really like to have them named. How does one go about doing that when working within the Ember-CLI context/environment.

p.s. I'm on Ember-CLI 0.2.3 with Ember 1.11.1 and the latest build of Ember Inspector (as of 11 Apr 2015).

---

It was suggested that a toString() function might solve this problem but it does not seem to be having that effect for me:

What you see in the image above is what appears in the Inspector after applying the changes suggested below:

// addon/mixins/ui-shared-animation.js

import Ember from 'ember';

var AnimationSupport = Ember.Mixin.create({
  classNameBindings: ['_animateClass'],

  animate: null,
  _animator: Ember.observer( ... ),
  animateEnabled: null,
  animateDisabled: null,
  _disabledObserver: Ember.observer( ... ),
  animateEnter: null,
  _enterAnimationObserver: Ember.observer( ... ),
  _processAnimation: function(animate) { ... }
  }
});

AnimationSupport.toString = function() { return 'ui-shared-animation'; };
export default AnimationSupport; 

Answer 1

Ok, I've answer my question by looking into the Ember Inspector's closed issues and pulling out this gem:

https://github.com/emberjs/ember-inspector/issues/284

Within Ember-CLI, all you need to do for a mixin is the following:

// addon/mixins/ui-shared-animation.js

import Ember from 'ember';

var AnimationSupport = Ember.Mixin.create({
  classNameBindings: ['_animateClass'],

  animate: null,
  _animator: Ember.observer( ... ),
  animateEnabled: null,
  animateDisabled: null,
  _disabledObserver: Ember.observer( ... ),
  animateEnter: null,
  _enterAnimationObserver: Ember.observer( ... ),
  _processAnimation: function(animate) { ... }
  }
});

AnimationSupport[Ember.NAME_KEY] = 'animation-support';
export default AnimationSupport; 

Yay! My 6 mixin approach to addons just got a lot more reasonable. :)

Answer 2

I had the same problem and solved it with a toString method on the class.. So for example:

var Person = Ember.Object.extend({
  name: null
});

Person.toString = function() { return 'Person'; };

export default Person;