Template Inheritance

[RobbieTheWagner]

Moving this discussion from Ember issues to here. The original issue was emberjs/ember.js#11167

I think something like this should be supported, especially with the push towards components.

I want to have a parent component with a template like:

<div>Foo</div>
<div>Bar</div>
{{yield}}

And then I would expect for child components, that extend that parent component to just be able to define a template of:

<div>Baz</div>

And have it automatically put that in the yield, so whenever I used the child component, it would show up as:

<div>Foo</div>
<div>Bar</div>
<div>Baz</div>

[rlivsey]

There's probably some overlap with #72 here, so a child component could update a slot from its parent and not just the main yield.

[RobbieTheWagner]

@rlivsey yes, there does appear to be some similar concepts there. I'm essentially looking for the same thing, but with the ability for it to automatically inherit parent template HTML and such.

[tsing80]

I would like to simulate template inheritance using partial helper below. But since partial helper do not replace {{yield} with the child template. It didn't work:

app/components/base/component.js:

import Ember from ‘ember’;
export default Ember.Component.extend();

app/components/base/template.hbs:

<div>parent template{{yield}}</div>

app/components/child/component.js:

import Base from ‘../base/component’;
export default Base.extend();

app/components/child/template.hbs:

{{#partial “components/base”}}
It didn't work
{{/partial}}

it would be nice if partial helper support {{yield}} in block form.

[locks]

@tsing80 Why use a partial instead of a component?

[tsing80]

@locks To render the template in the context of the child component.The child component extend the base component and will override some behaviour in the base component

[RobbieTheWagner]

@locks what are your thoughts on this now? Should we be avoiding inheritance and opting for composability instead? Trying to assess if we should close this out or not.

[locks]

Thanks for pinging me @rwwagner90.

I believe that template inheritance is a footgun waiting to happen, and I'm not sure what the API for it would look like, since we wouldn't be able to change the current extending behaviour without breaking compatibility. I do think that composability is a better way forward, as you mention, and with the advent of tagless components there won't be the trade-off of extraneous div tags.
Adding to that the lack of movement, I'm for closing the issue. Thank you for filing it and bringing some discussion to the topic.

[RobbieTheWagner]

@locks agreed. Closing. Thanks!