Delegation Pattern for Sling Models doesn't populate all the properties from super class
I am trying to understand Delegation patterns better when we extend the core components Sling model.
I am following the example provided here https://github.com/adobe/aem-core-wcm-components/wiki/Delegation-Pattern-for-Sling-Models to extend the Teaser component. Basically, I want all the properties defined in the Teaser component and add a few more.
Whatever new properties I am adding to the custom sling model, I can access those, and they return the correct values. But the properties defined in the core component Teaser model return no value. Upon debugging, I noticed that values are being populated correctly in the private teaser property, so I thought of returning the whole Teaser object through the getter as shown in the below code snippet. (again, not sure if this is a good solution or not).
@1961677
@Via(type = ResourceSuperType.class)
private Teaser teaser;
public Teaser getTeaser() {
return teaser;
}
Now, I can access the core component's properties and read the values, but now my HTL looks ugly because to access the core component's properties, I have to write a teaser before those properties and not directly.
<div data-sly-use.customTeaser="com.company.subdomain.core.models.CustomTeaser">
<h2>${customTeaser.teaser.title}</h2>
</div>
I am sure I am doing something wrong here; that's why I wanted to reach out to the community to get some better ideas. Is there any other approach to extend a core component easily? Is something that needs to be done differently when implementing a delegation pattern to access core components properties without overriding each one?