Last active
September 7, 2022 13:07
-
-
Save kevinweber/954fa85a71d91a85d4e0839b2616d759 to your computer and use it in GitHub Desktop.
HTL/Sightly: "Use and call template" pattern. Put template into separate file for reusability, and pass parameters when calling it. Note that in most cases it's not necessary to pass "properties" to the template because they work even if they're not passed explicitly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<sly data-sly-use.component="template.html" | |
data-sly-call="${component.template @ properties=properties}" /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template data-sly-template.templateText="${@ properties}"> | |
<div data-sly-resource="${'text' @ resourceType='core/wcm/components/text/v1/text'}"></div> | |
</template> | |
<sly data-sly-call="${templateText @ properties=properties}" /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template data-sly-template.template="${@ properties}"> | |
<p>${properties.onePropertyValue @ i18n}</p> | |
</template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html" | |
data-sly-call="${templates.placeholder @ isEmpty = true}"></sly> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment