javascriptember.jsember-cliember-cli-addonsember-addon

How to override default functionality in Ember-addons


In the ember-cli documentation it describes bridging the addon within your host application by overriding the app/component/[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 component file in your [host app]/app/component/[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?


Solution

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

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

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

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

    import XSelect from 'emberx-select/components/x-select';
    
    export default XSelect.extend({
      //any overrides
    });