1) There is a new operator 'in' which helps to check the availability of an item in strings, arrays, and objects.
Usage:
${'c' in 'abc'}
${10 in myArray}
${'b' in myObject}
2) A new data-sly-set to define variables in HTL
Usage: <sly data-sly-set.title="${currentPage.description}"/>${description}
3) More control for the list iteration using parameters 'begin, step, end'
Usage:
<h2 data-sly-repeat = "${currentPage.listChildren @ begin =1 , step =2 }"> ${item.title} </h2>
4) data-sly-unwrap improvement with identifiers
Usage:
<div data-sly-unwrap.isUnwrapped="${myFirstCondition || mySecondCondition}">
text <span data-sly-test = "${isUnwrapped}"> is unwrapped </span>
</div>
5) Now HTL supports negative numbers
So while working with AEM 6.5, don't forget to utilize this improvement as part of HTL development.
Sample Code is given below,
template.html
<!DOCTYPE html>
<!--/* Calling the server-side JS script for all view logic that Sightly cannot do */-->
<html data-sly-use.logic="logic.js">
<head>
<!--/* Expressions allow to easily output variables */-->
<title>${currentPage.title}</title>
<meta charset="utf-8">
</head>
<body>
Hello
<!--/* To allow some HTML, use the following context option */-->
<p>${properties.jcr:description @ context='html'}</p>
${'a' in logic.myObject}
${10 in logic.myArray}
${'d' in logic.myString}
<div data-sly-unwrap.isUnwrapped= "${'d' in logic.myObject }">
text <span data-sly-test = "${isUnwrapped}"> is unwrapped </span>
</div>
<p data-sly-use.logic="logic.js" data-sly-unwrap>#### World</p>
<!--/* Iterating over any collection or iterable is easy */-->
<ul data-sly-list="${logic.myPage.listChildren @ begin =2 , step =1}">
<li><a href="${item.path}.html">${item.title}</a></li>
</ul>
<ul data-sly-list="${logic.myPage.listChildren}">
<li> ${item.title} </li>
</ul>
</body>
</html>
logic.js:
use(function () {
return{
myString: "abcd",
myArray: [10,100,1000],
myObject: {
a: "Hello",
b: "World"
},
myPage: pageManager.getPage('/content/we-retail/us/en')
};
});
${'c' in 'abc'}
${10 in myArray}
${'b' in myObject}
2) A new data-sly-set to define variables in HTL
Usage: <sly data-sly-set.title="${currentPage.description}"/>${description}
3) More control for the list iteration using parameters 'begin, step, end'
Usage:
<h2 data-sly-repeat = "${currentPage.listChildren @ begin =1 , step =2 }"> ${item.title} </h2>
4) data-sly-unwrap improvement with identifiers
Usage:
<div data-sly-unwrap.isUnwrapped="${myFirstCondition || mySecondCondition}">
text <span data-sly-test = "${isUnwrapped}"> is unwrapped </span>
</div>
5) Now HTL supports negative numbers
So while working with AEM 6.5, don't forget to utilize this improvement as part of HTL development.
Sample Code is given below,
template.html
<!DOCTYPE html>
<!--/* Calling the server-side JS script for all view logic that Sightly cannot do */-->
<html data-sly-use.logic="logic.js">
<head>
<!--/* Expressions allow to easily output variables */-->
<title>${currentPage.title}</title>
<meta charset="utf-8">
</head>
<body>
Hello
<!--/* To allow some HTML, use the following context option */-->
<p>${properties.jcr:description @ context='html'}</p>
${'a' in logic.myObject}
${10 in logic.myArray}
${'d' in logic.myString}
<div data-sly-unwrap.isUnwrapped= "${'d' in logic.myObject }">
text <span data-sly-test = "${isUnwrapped}"> is unwrapped </span>
</div>
<p data-sly-use.logic="logic.js" data-sly-unwrap>#### World</p>
<!--/* Iterating over any collection or iterable is easy */-->
<ul data-sly-list="${logic.myPage.listChildren @ begin =2 , step =1}">
<li><a href="${item.path}.html">${item.title}</a></li>
</ul>
<ul data-sly-list="${logic.myPage.listChildren}">
<li> ${item.title} </li>
</ul>
</body>
</html>
logic.js:
use(function () {
return{
myString: "abcd",
myArray: [10,100,1000],
myObject: {
a: "Hello",
b: "World"
},
myPage: pageManager.getPage('/content/we-retail/us/en')
};
});
No comments:
Post a Comment
If you have any doubts or questions, please let us know.