Skip to content

Instantly share code, notes, and snippets.

@Surajkamdi
Forked from kevinweber/component.html
Created September 19, 2018 09:50
Show Gist options
  • Save Surajkamdi/2f07c90d0efdfa46b61cb438499b72c4 to your computer and use it in GitHub Desktop.
Save Surajkamdi/2f07c90d0efdfa46b61cb438499b72c4 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.
<sly data-sly-use.component="template.html"
data-sly-call="${component.template @ properties=properties}" />
<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}" />
<template data-sly-template.template="${@ properties}">
<p>${properties.onePropertyValue @ i18n}</p>
</template>
<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