視覺（HTL）列表迭代

Question

如何在視覺上迭代String值的arrayList。

使用我的後端Java類我得到ArrayList返回到Sightly。我如何遍歷它們並顯示？

Answer 1

你可以試試data-sly-list？

例子：

<ul data-sly-list.myitem="${mylist}" data-sly-unwrap> 
    <li>${myitem}</li> 
</ul> 

Answer 2

您可以使用data-sly-list或data-sly-repeat遍歷集合/ iterables在HTL。他們兩人的唯一區別是相同的，data-sly-repeat不需要容器，而data-sly-list需要一個。

用法：

方法1

<ul data-sly-list="${someList}"> 
    <li>${item}</li> 
</ul> 

方法2

<ul> 
    <li data-sly-repeat="${someList}">${item}</li> 
</ul> 

這兩者產生相同的輸出如下所示

<ul> 
    <li>item1</li> 
    <li>item2</li> 
    <li>item3</li> 
</ul> 

更多關於HTL Block Statements can be found here

Answer 3

data-sly-list使用容器如請參閱示例以獲得更好的理解。

我的文章

test1 
test2 
test3 
test4 

<div data-sly-list="${ currentPage.listChildren }"> 
     ${item.name} 
</div> 

輸出將生成 -

test1 test2 test3 test4 

當您查看HTML元素結構，你的調試器那麼這將是 -

<div> 
    Test1 
    Test2 
    Test3 
    Test4 
<div> 

現在使用data-sly-repeat-

<div data-sly-repeat="${ currentPage.listChildren }"> 
     ${item.name} 
</div> 

輸出將是 - XHTML

test1 
test2 
test3 
test4