5

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?

sam
  • 753
  • 1
  • 6
  • 15

1 Answers1

8

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
});
Kate
  • 276
  • 1
  • 3
  • Thanks Kate, and that's exactly what I'm trying to do; however, I'm getting results that I'm not expecting. I'm trying to extend selectize which is included in the ember-add ember-selectize. In my app, I've created /component/ember-selectize/component.js which is great; however, the component doesn't seem to work if I **only** update the one function that I need to override. Unfortunately, I've only been able to get this working by copy/pasting everything. – sam Apr 14 '15 at 19:43
  • Additionally, within the didInsertElement override I would have expected to this.super() inside of it in order to just include a single line of code in that body to customize the component. Instead that throws an error and doesn't work. – sam Apr 14 '15 at 19:48
  • Kate - thanks for your patience. I've created a repo where I use ember-cli-selectize and I override it locally in hopes of just overriding the underlying template rendering...however, when I start deleting other supporting functions it stops working. Additionally, within the function that I'm overriding I can perform a this._super() to execute the default behavior. https://github.com/samdelagarza/ember-extend-addon-test – sam Apr 17 '15 at 19:28
  • In effect, these are the lines I wrote to override the default behavior. https://github.com/samdelagarza/ember-extend-addon-test/blob/master/app/components/ember-selectize.js#L145-L151 – sam Apr 17 '15 at 19:29
  • Sorry, I meant the code that you tried that didn't work, not what you had to do to make it work. – Kate Apr 17 '15 at 23:37
  • Your patch seemed to work, I obviously did something wrong that broke my build before. Thank you for your help and time. :-) – sam Apr 22 '15 at 20:58