Data-sly-list & Data-sly-repeat
AEM Sightly:
Data-sly-list : the most powerful block statement of sightly which iterate the collection return from the slingModel.
Data-sly-list can handle any kind of collection like:
Example:
<div data-sly-use.variable_name=“com.aem.package_name.core.models.Interfaceclass_name”></div>// this is used to call the slingModel
<div data-sly-list.item=“${variable_name. InterfaceMethod_Name}”> // item is the default variable provided by Slightly & you can give any name
${item}
</div>
*note: Map don’t give ordered list, It gives random list.
—> We can control loop’s in slightly using begin, end.
Example:
<div data-sly-list.item=“${variable_name.InterfaceMethod_Name @ begin=0, end=3}”>
// the loop gives 4 values
${item}
</div>
—> Slightly provide some methods like: count, even, odd, middle…etc.
Example:
<div data-sly-list.item=“${variable_name.InterfaceMethod_Name}”>
${itemList.count} : ${item}
//here the itemList.count gives the count of item for every iteration it increment the count.
${itemList.index} : ${item} //here it add index to the item.
${itemList.first} : ${item} //if the item is first item, It return “True” otherwise “false”.
${itemList.last} : ${item} //if the item is last item, It return “True” otherwise “false”.
${itemList.middle} : ${item} // otherthen first and last items remaining all are middle.
${itemList.even} : ${item} // if item is even return “True”.
${itemList.odd} : ${item}. // if item is odd return “True”.
</div>
Output:
//itemList.count
1 : book
2 : pen
3 : phone
//itemList.index
Index 01:book
Index 02:pen
Index 03:phone
//itemList.first
True
False
False
//itemList.last
False
False
True
//itemList.middle
False
True
False
//itemList.enen
False
True
False
//itemList.odd
True
False
True
—> We can skip Iterations using “step”
<div data-sly-list.item=“${variable_name.InterfaceMethod_Name @ step=2}”> // here it skips one iteration.
Data-sly-repeat:
Data-sly-repeat is same as Data-sly-list , but the difference is the list iterate with in the container(<div>…</div>) the repeat iterate the whole container for every iteration.
Data-sly-list:
<div>
<p>…….</p> // Iterate with in the div container
<p>…….</p>
<p>…….</p>
</div>
Data-sly-repeat:
<div>
<p>…….</p> //the complete div container Iterate for every Iteration
</div>
<div>
<p>…….</p>
</div>
<div>
<p>…….</p>
</div>
https://www.youtube.com/watch?v=ERmZ0vAu7fs&list=PLEaEQSM_Y4tmd0kEUdZQK-bK1TEd2XoV7
Comments
Post a Comment