Working with Sightly and Templates in AEM 6.1

Use templates in AEM 6.1 Sightly :

1. Template (data-sly-template)

                These are the HTML blocks which act a function. Every block will have an identifier and like normal function they do accept parameters. When you are defining the block, you can define all parameters that will be accepted by it.

Example1:

      <template data-sly-template.first>
              This is my first Template.
      </template>

Now, create a simple template with identifier as ‘first‘.

In order to use this block you call them with identifier

2. Call (data-sly-call)

Call will help you to get a declared HTML block or template.

     <div data-sly-call="${first}"></div> 

Above statement will call our template with identifier ‘first‘.

Output HTML:

<div>
This is my first Template.
</div>

===============================================================

Example 2: 

           Passing parameters to templates

Template:

     <template data-sly-template.second="${@ x, y, z}">
           Value of x = ${x}, y= ${y}, z= ${z}
     </template>

Call:

     <div data-sly-call=”${second @ x=1, y=2, z=3}”></div>

Output HTML:
      <div>
         Value of x = 1, y= 2, z= 3
      </div>

 ===============================================================

Example 3: 

           Template in different file

Above examples based on assumptions that templates present in the same file in which we are calling them, other many scenarios when you create template in one html and need to call them in different file.

Template:

 It will be presented at path  

/apps/project/component/content/sightly-demo/mytemplates.html

<template data-sly-template.third="${@ x, y, z}" >
      Value of x= ${x}, y= ${y}, z= ${z}
</template>

Call:

The file in which we will call this is present at path /apps/project/component/content/sightly-demo/sightly-demo.html

<div data-sly-use.data="mytemplates.html" data-sly-call="${data.third @ x=1, y=2, z=3}">

</div>

You can use “data-sly-use” which will help you to get a reference to the file. 

Path to the file can be absolute or relative.

Output:
      <div>
        Value of x = 1, y= 2, z= 3
      </div>

One more example where our template will call sightly JS file before returning html.

===============================================================

Example 4:

<template data-sly-template.fourth="${@ page}" data-sly-   use.tmpl="${'simple.js' @ page=page, descriptionLength=50}">
       <h1>${tmpl.title}</h1>
        <p>${tmpl.description}</p>

</template>

simple.js

use(function () {
var Constants = {
DESCRIPTION_PROP: "jcr:description"
};

var title = this.page.getNavigationTitle() || this.page.getTitle() || this.page.getName();
var description = this.page.getProperties().get(Constants.DESCRIPTION_PROP, "").substr(0, this.descriptionLength);
return {
title: title,
description: description
};
});

Call:

<div data-sly-use.tmpl="mytemplates.html" data-sly-call="${tmpl.fourth @ page=currentPage}"></div>

Output:

      <div>
       <h1>English</h1>
       <p>This is a demo page. It shows how to use templates</p>
      </div>