视觉(HTL)列表迭代

Question

如何在Sightly中迭代字符串值的arrayList？

使用我的后端java类，我将得到一个返回给Sightly的ArrayList。我如何迭代并显示它们？

Answer 1

您可以使用data-sly-list或data-sly-repeat对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块语句的信息

Answer 2

你能试试data-sly-list吗？

示例：

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

Answer 3

数据-狡猾-列表使用容器，如，请参阅示例，以更好地理解。

我有下面的清单

test1
test2
test3
test4

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

输出将产生如下内容：

test1 test2 test3 test4

当您在调试器中查看HTML元素结构时，它将是-

<div>
   Test1
   Test2
   Test3
   Test4
<div>

现在使用数据-狡猾-重复-

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

输出将是- XHTML

test1
test2
test3
test4