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>
Aucun commentaire:
Enregistrer un commentaire