CODEWITHSUNDEEP
ember.js
Eli Rose
Eli Rose

Reputation: 6998

Ember.js: how do I override one of my superclass's actions in a component?

This is Ember.js 2.11. If I have a Component:

app/components/a/component.js

export default Ember.Component.extend({
   actions: {
      foo() { ... }
   }
});

and another component which inherits from it:

app/components/b/component.js

import A from 'components/a';

export default Ember.Component.extend(A, {
  ...
});

How do I override foo in B? Defining my own actions object does not appear to work.

Upvotes: 1

Views: 1117

Answers (1)

Ember Freak
Ember Freak

Reputation: 12872

By default actions hash is mergedProperties that's the reason for it's not overriding. You can see it here. You can see merged properties explanation here

Defines the properties that will be merged from the superclass (instead of overridden).

You can just extend like the below,

import A from 'components/a';

export default A.extend({
  ...
  actions: {
    foo() { ... }
  }
});

You can define foo actions in component-b. if you want to call foo action of component a from component-b you can call this._super(...arguments).

Sample twiddle

Upvotes: 2

Related Questions