Using mixins with Ember-cli?

Question

I have a mixin app/mixins/ui-listener.js which I'm struggling to use with Ember-CLI. I'm trying to use the mixin with the following syntax:

import ListenerMixin from './mixins/ui-listener';
export default Ember.Component.extend(ListenerMixin,{
    // class definition
}

This fails when I save it, complaining that

ENOENT, no such file or directory 'tmp/tree_merger-tmp_dest_dir-74tK3rvD.tmp/[app-name]/components/mixins/ui-listener.js'

It seems funny that the "mixins" directory is nested under the "components" directory (as Ember-CLI puts these directories at the same level) but this may just a Brocoli build step. Anyway, any help would be greatly appreciated.

./ means this directory should be ../, you're missing a . — Patsy Issa
@BasementKeyboardHero this is correct ... I had used the example from the website which apparently should be updated. — ken
You'll find it here: ui-listener. It covers resize and visibility events at the moment. I'll add scrolling events in the next few days. Eventual goal is to release as a CLI addon. — ken

saygun saygun · Accepted Answer · 2014-12-09T11:48:11

I don't know how do you export your mixin but this should work:

in mixins/ui-listener.js:

import Ember from 'ember';

export default Ember.Mixin.create({
 //some stuff
});

in components/my-component.js:

import Ember from 'ember';
import UIListenerMixin from '../mixins/ui-listener';

export default Ember.Component.extend(UIListenerMixin, {
 // some stuff
});

Using mixins with Ember-cli?

2 Answers