Hi All,
Went through Sightly documentation/artciles written by Feike, but somehow I just don't seem to be getting this.
Any explanation on this will be helpful.
Solved! Go to Solution.
Views
Replies
Total Likes
Hi
Case 1:- Static template that has no parameters:
<template data-sly-template.one>blah</template> <div data-sly-call="${one}"></div>
Case 2:-The scope of the data-sly-call statement isn't inherited by the data-sly-template block. To pass variables, they must be passed as parameters:
<template data-sly-template.two="${@ title, resource='The resource of the parent node'}"> <!--/* Notice the usage hint on the resource parameter. */--> <h1>${title}</h1> <p>Parent: ${resource.name}</p> </template> <div data-sly-call="${two @ title=properties.jcr:title, resource=resource.parent}"></div>
It can sometimes be useful to isolate snippets of Sightly markup as a reusable templates. Let’s try that with our
list and isolate it as a template. Templates are defined with “data-sly-template” and can be called with “data-slycall”.
The template definition needs uses the dot notation to define a variable name for it to be called. Finally,
parameters can be passed using parametric expressions (the “@” is followed by a list of named parameters):
<sly data-sly-template.childPages="${@ page}">
<ul data-sly-list="${page.listChildren}">
<li>${item.title}</li>
</ul>
</sly>
<sly data-sly-use.page="logic.js" data-sly-call="${childPages @ page=page}"/>
call it recursively:
<sly data-sly-template.childPages="${@ page}">
<ul data-sly-list="${page.listChildren}">
<li>
${item.title}
<sly data-sly-call="${childPages @ page=item}"/>
</li>
</ul>
</sly>
<sly data-sly-use.page="logic.js" data-sly-call="${childPages @ page=page}"/>
Very Good Sightly Documentation :- https://github.com/Adobe-Marketing-Cloud/sightly-spec/blob/master/SPECIFICATION.md
I hope this would help you.
Thanks and Regards
Kautuk Sahni
Views
Replies
Total Likes
From the spec here:
https://github.com/Adobe-Marketing-Cloud/sightly-spec/blob/master/SPECIFICATION.md
2.2.10.1 Template
data-sly-template:
Views
Replies
Total Likes
Hi
Case 1:- Static template that has no parameters:
<template data-sly-template.one>blah</template> <div data-sly-call="${one}"></div>
Case 2:-The scope of the data-sly-call statement isn't inherited by the data-sly-template block. To pass variables, they must be passed as parameters:
<template data-sly-template.two="${@ title, resource='The resource of the parent node'}"> <!--/* Notice the usage hint on the resource parameter. */--> <h1>${title}</h1> <p>Parent: ${resource.name}</p> </template> <div data-sly-call="${two @ title=properties.jcr:title, resource=resource.parent}"></div>
It can sometimes be useful to isolate snippets of Sightly markup as a reusable templates. Let’s try that with our
list and isolate it as a template. Templates are defined with “data-sly-template” and can be called with “data-slycall”.
The template definition needs uses the dot notation to define a variable name for it to be called. Finally,
parameters can be passed using parametric expressions (the “@” is followed by a list of named parameters):
<sly data-sly-template.childPages="${@ page}">
<ul data-sly-list="${page.listChildren}">
<li>${item.title}</li>
</ul>
</sly>
<sly data-sly-use.page="logic.js" data-sly-call="${childPages @ page=page}"/>
call it recursively:
<sly data-sly-template.childPages="${@ page}">
<ul data-sly-list="${page.listChildren}">
<li>
${item.title}
<sly data-sly-call="${childPages @ page=item}"/>
</li>
</ul>
</sly>
<sly data-sly-use.page="logic.js" data-sly-call="${childPages @ page=page}"/>
Very Good Sightly Documentation :- https://github.com/Adobe-Marketing-Cloud/sightly-spec/blob/master/SPECIFICATION.md
I hope this would help you.
Thanks and Regards
Kautuk Sahni
Views
Replies
Total Likes
Views
Likes
Replies