3

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?

megas
  • 21,401
  • 12
  • 79
  • 130

1 Answers1

2

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.

lependu
  • 1,160
  • 8
  • 18
  • I think for my case the reopenClass is most suitable. But the Ember Component is binded to `elementId`, what actually is the class name here? – megas Sep 11 '16 at 16:47
  • classNames, classNameBindings and attributeBindings are concatenated properties in components. So just extend classNames or classNameBindings, and you get all the classes from the addon and the class names what you define in your component. See this: http://emberjs.com/api/classes/Ember.Object.html#property_concatenatedProperties – lependu Sep 11 '16 at 17:21
  • But classNameBindings has array of two strings, what's the name of component exactly? – megas Sep 11 '16 at 17:56
  • The classNames and classNameBindings are represents the component's css classes, not the js class. The component name what you want to import and reopen is discourse/components/topic-progress. I edited the original answer. – lependu Sep 11 '16 at 19:45