In the ember-cli documentation it describes bridging the addon within your host application by overriding the app/ponent/[addon-name.js] yourself. However, the documentation doesn't explicitly state how to do this.

With trial and error I've noticed that by creating a ponent file in your [host app]/app/ponent/[name of addon.js] and simply copy/paste the addon code into there provides a venue to customize the addon. However, this is a terrible approach, I would imagine that I could simply override the functions in question...and in some cases call this.super().functionName in order to keep the over-rides simple and trim.

However, I can't get this to work. Any ideas?

In the ember-cli documentation it describes bridging the addon within your host application by overriding the app/ponent/[addon-name.js] yourself. However, the documentation doesn't explicitly state how to do this.

With trial and error I've noticed that by creating a ponent file in your [host app]/app/ponent/[name of addon.js] and simply copy/paste the addon code into there provides a venue to customize the addon. However, this is a terrible approach, I would imagine that I could simply override the functions in question...and in some cases call this.super().functionName in order to keep the over-rides simple and trim.

However, I can't get this to work. Any ideas?

• javascript
• ember.js
• ember-cli
• ember-cli-addons
• ember-addon

1 Answer 1

Extensibility is why addons have both the addon/ and app/ trees. In the app tree for a ponent, the ponent should just be an import and export, for example:

import XSelect from 'emberx-select/ponents/x-select';
export default XSelect;

Source: https://github./thefrontside/emberx-select/blob/master/app/ponents/x-select.js

In this kind of case you want to create the ponent in [host app]/app/ponent/[name-of-addons-ponent.js] then in that ponent do:

import XSelect from 'emberx-select/ponents/x-select';

export default XSelect.extend({
  //any overrides
});