aem - Sightly (HTL) 列表迭代

Question

如何在 Sightly 中迭代字符串值的数组列表？

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

Answer 1

您可以使用data-sly-list或data-sly-repeat迭代 HTL 中的集合/可迭代对象。它们两者的工作方式相同，唯一的区别data-sly-repeat是不需要容器而data-sly-list需要容器。

用法：

方法一

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

方法二

<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

data-sly-list 使用容器如 请参阅示例以获得更好的理解。

我有以下列表

test1
test2
test3
test4

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

输出将生成为 –</p>

test1 test2 test3 test4

当您在调试器中查看 HTML 元素结构时，它将是 –</p>

<div>
   Test1
   Test2
   Test3
   Test4
<div>

现在使用 data-sly-repeat–</p>

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

输出将是 - XHTML

test1
test2
test3
test4