Hi. Is there any way to make a component that extends another component?
Here’s the code:
// my-base-component.js
export default Ember.Component.extend({
classNames: "my-base-component"
});
// my-base-component.hbs
{{yield}}
// my-other-component.js
export default Ember.Component.extend({
classNames: "my-other-component"
});
// my-other-component.hbs
{{#my-base-component}}
whatever
{{/my-base-component}}
What I want to achieve, when rendering my-other-component
:
<div class="my-base-component my-other-component">
whatever
</div>
What I get:
<div class="my-other-component">
<div class="my-base-component">
whatever
</div>
</div>
Now, I get that this is how ember works
But is there any way to make ember work my way?
Loz
March 5, 2017, 5:30pm
2
In your example, you are not extending the base component… you are just nesting it inside your other component’s template.
Instead you need to import
your base component, and extend
it.
// my-base-component.js
export default Ember.Component.extend({
classNames: "my-base-component"
});
// my-base-component.hbs
{{yield}}
Now use import MyBaseComponent
and MyBaseComponent.extend
import MyBaseComponent from 'app/components/my-base-component'; // <- import base component
// my-other-component.js
export default MyBaseComponent.extend({ // <- extend your base component
classNames: "my-other-component"
});
// my-other-component.hbs
{{yield}}
that should do it
1 Like
bjerh
March 7, 2017, 8:33am
4
You should consider whether a mixin would to the trick.
It seems that when one component extends another, classNames
are concatenated… Is there any documentation on which Ember.Component
properties behave line that?
PS. @bjerh , yeah, mixin sounds about right here.