Using data-sly-use.object results in hiding the component

Question

I am trying to recreate the Byline component activity in AEM WKND (https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-develop/project-archetype/custom-component.html?lang=en#byline-styles). However when I tried to implement the html file, byline component is hidden in the page whenever I call data-sly-use api. Is there any workaround or solution for this one?

Below is my impl code:

@Model(adaptables = {SlingHttpServletRequest.class},
       adapters = {Byline.class},
       resourceType = {BylineImpl.RESOURCE_TYPE},
       defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class BylineImpl implements Byline {
protected static final String RESOURCE_TYPE = "wknd/components/byline";

    @Self
    private SlingHttpServletRequest request;

    @OSGiService
    private ModelFactory modelFactory;

    @ValueMapValue
    private String name;

    @ValueMapValue
    private List<String> occupations;

    private Image image;

    @Override
    public String getName() {
        return name;
    }

    @PostConstruct
    private void init(){
        image = modelFactory.getModelFromWrappedRequest(request, request.getResource(), Image.class);

    }

    @Override
    public List<String> getOccupations() {
        if (occupations != null) {
            Collections.sort(occupations);
            return new ArrayList<String>(occupations);
        } else {
            return Collections.emptyList();
        }
    }

    @Override
    public boolean isEmpty() {
        final Image componentImage = getImage();

        if (StringUtils.isBlank(name)) {
            // Name is missing, but required
            return true;
        } else if (occupations == null || occupations.isEmpty()) {
            // At least one occupation is required
            return true;
        } else if (componentImage == null || StringUtils.isBlank(componentImage.getSrc())) {
            // A valid image is required
            return true;
        } else {
            // Everything is populated, so this component is not considered empty
            return false;
        }
    }

    private Image getImage() {
        return image;
    }
}

Below is my byline.html code:

div data-sly-use.byline="com.adobe.aem.guides.wknd.core.models.impl.BylineImpl" 
data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html" 
data-sly-test.hasContent="${!byline.empty}" class="cmp-byline">
      <div class="cmp-byline__image" data-sly-resource="${ '.' @ resourceType = 'core/wcm/components/image/v2/image' }">
      </div>
      <h2 class="cmp-byline__name">${byline.name}</h2>
      <p class="cmp-byline__occupations">${byline.occupations @ join=', '}</p>
 </div>
 <sly data-sly-call="${placeholderTemplate.placeholder @ isEmpty=!hasContent}"></sly>

Answer 1

Try to modify data-sly-use.byline="com.adobe.aem.guides.wknd.core.models.impl.BylineImpl" to data-sly-use.byline="com.adobe.aem.guides.wknd.core.models.Byline"