How to reopen class from plugin in Ember CLI?


#1

Hello,

I am using x-select addon (https://github.com/thefrontside/emberx-select). I need to reopen x-select class from this plugin. How to do it? In which file should I do it?


#2

This is not official part of ember-cli, but from observing how Ember itself is structured, this is how you would do it.

app/
  ext/
    emberx-select.js
  initializers/
    emberx-select.js

Use an initializer to import the ext modules to load them. Then use the ext modules to do the reopening.


#3

Thanks for your answer. I am no sure, if I understood you corectly. I should create those two files, and reopen the class in the emberx-select.js? How should I use the initializer? Could you give me an example, please?


#4
// app/initializers/emberx-select.js
import ext from '../ext/emberx-select';

export function initialize() {
  // nothing else needs to be done here
}

export default {
  name: 'emberx-select',
  initialize: initialize
};
// app/ext/emberx-select.js
import Select from 'emberx-select';

Select.reopen({
  ...
});

Initializers are automatically loaded by Ember. You use it to bootstrap all of your extension changes. Use one ext/ file for each class that you’ll reopen, preferably structured similarly to the directory of the class you’re reopening.

You can actually use one initializer to handle all of your extension needs, because all this initializer do is import.


#5

Thanks for the example, I’ve tried it, I’ve been playing with it for few hours, however I couldn’t get rid off the error "Could not find module emberx-select/index".

I think it is becouse I don’t really understand, how to refer pluin packages - what are their names? Should I specify a path or not?


#6

Heureka - I finally solved the problem. I didn’t wanted to import the whole package; I only wanted to import the given modules - so I needed to specify them explicitly:

import Select from 'emberx-select/components/x-select';

Now it works perfectly. Thanks much for your help.