Add Additional Custom Attributes in Template (Slightly)

Question

I'd like to use additional attribute when using data-sly-call

Here's the template:

<template data-sly-template.button="${ @ model}">
    <button data-info="Body"
            class="${model.moreClass}">
        ${model.label}
    </button>
</template>

When I use the button template, if there are additional css class that I'd like to add that the template does not have, what's the syntax that I should use?

Currently I have tried the following:

(1)

<sly data-sly-use.btnTemplate="button/button.html"></sly>
<div data-sly-call="${btnTemplate.button @ model= btnModel.btn}" aria-expanded="false" toggle-style="${model.toggleStyle}" aria-controls="${model.id}" data-alternate-aria-label="${model.altAriaLabel}">${model.label}</div>

(2)

<sly data-sly-use.btnTemplate="button/button.html"></sly>
<sly data-sly-call="${btnTemplate.button @ model= btnModel.btn}" aria-expanded="false" toggle-style="${model.toggleStyle}" aria-controls="${model.id}" data-alternate-aria-label="${model.altAriaLabel}">${model.label}</sly>

(3)

<sly data-sly-use.btnTemplate="button/button.html"></sly>
<sly data-sly-call="${btnTemplate.button @ model= btnModel.btn}" data-sly-attribute.aria-expanded="false" data-sly-attribute.toggle-style="${model.toggleStyle}" data-sly-attribute.aria-controls="${model.id}" data-sly-attribute.data-alternate-aria-label="${model.altAriaLabel}">${model.label}</sly>

All the above are not working. I was wondering what's the correct syntax?

I'd like it to render as:

<button data-info="Body" class="${model.moreClass}" aria-expanded="false" toggle-style="${model.toggleStyle}" aria-controls="${model.id}" data-alternate-aria-label="${model.altAriaLabel}">
            ${model.label}
        </button>

Answer 1

Calling an HTL template through a sly tag with data-sly-call will cause anything that you add to the attributes of the sly element, as well as its contents to be ignored. sly elements don't render, they behave like elements to which you add an unconditional data-sly-unwrap.

Given that you already have a template that accepts a model object as an only parameter, this is how you would use it.

<sly data-sly-use.btnTemplate="button/button.html" />
<!-- This is replaced entirely by the template's contents -->
<sly data-sly-call="${btnTemplate @ model=someModel}" /> 

anything beyond that (that isn't a data-sly-* attribute will be ignored.

<sly data-sly-call="${btnTemplate @ model=someModel}" attribute-added-here="won't be rendered" >This isn't rendered either</sly> 

The way the template is structured

<template data-sly-template.button="${ @ model}">
    <button data-info="Body"
            class="${model.moreClass}">
        ${model.label}
    </button>
</template>

You can only influence the output by setting the moreClass and label properties on the model that you pass to the template.

Rendering this:

<button data-info="Body" class="${model.moreClass}" aria-expanded="false" toggle-style="${model.toggleStyle}" aria-controls="${model.id}" data-alternate-aria-label="${model.altAriaLabel}">
    ${model.label}
</button>

would require changing the template or creating a new one, to include the extra attributes.