Not able to get usage of data-sly-template

[askdctm]

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.

[smacdonald2008]

From the spec here:

https://github.com/Adobe-Marketing-Cloud/sightly-spec/blob/master/SPECIFICATION.md

2.2.10.1 Template

data-sly-template:

• Declares an HTML block, naming it with an identifier and defining the parameters it can get.
• Element: never shown.
• Content of element: shown upon calling the template with data-sly-call.
• Attribute value: optional; an expression with only options, defining the parameters it can get.
• Attribute identifier: required; the template identifier to declare.

[kautuk_sahni · Accepted solution]

Hi 

Template blocks can be used like function calls: in their declaration they can get parameters, which can then be passed when calling them. They also allow recursion.

data-sly-template:

• Declares an HTML block, naming it with an identifier and defining the parameters it can get.
• Element: never shown.
• Content of element: shown upon calling the template with data-sly-call.
• Attribute value: optional; an expression with only options, defining the parameters it can get.
• Attribute identifier: required; the template identifier to declare.

data-sly-call:

• Calls a declared HTML block, passing parameters to it.
• Element: always shown.
• Content of element: replaced with the content of the called data-sly-template element.
• Attribute value: optional; an expression defining the template identifier and the parameters to pass.
• Attribute identifier: none.

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