Modify method in Ember Component

Question

In the Discourse I want to modify method _dock. The modifying code will be placed in plugin.

Here's short snippet from that file:

export default Ember.Component.extend({
  elementId: 'topic-progress-wrapper',
  classNameBindings: ['docked', 'hidden'],

  ...
  _dock() {
    ...
  },

});

How to modify this method? Should I reopen this component and what is a syntax for that?

Answer 1

Take a look this and this guide. You need to create a new component, something like this:

// components/my-discourse-component.js
import MyDiscourseComponent from 'discourse/components/topic-progress';

MyDiscourseComponent.extend({
  // Here you can extend the function. Don't forget
  // this._super(...arguments) if you want to use the original function.
});

MyDiscourseComponent.reopenClass({
  // Here you can completly override the function.
});

export default MyDiscourseComponent;

and just use {{my-discourse-component}} in your temlate.

Or you can copy the addon's code into a mixin, and simply extend your new component with that mixin.