当每个字段有多个值时如何循环遍历 AEM 多字段组件

Question

我创建了一个自定义多字段组件（标题为 "breadcrumbs"），它将用作页面的面包屑导航。每个多字段项都包含一个文本字段和一个路径浏览器。我想将每个多字段项目列为锚标记，其中 "text" 属性作为文本，"link" 属性作为 href。

现在，我 html 列出了如下属性：

<div>
    <p>${properties.text}</p>
    <p>${properties.link}</p>
</div>

将此输出到页面：

text 1,text 2

link 1,link 2

我知道如何为每个属性使用 data-sly-list 和 data-sly-repeat 来获取所有文本和链接的列表，如下所示：

<ul data-sly-list="${properties.text}">
    <li><p>${items}</p></li>
</ul>

<ul data-sly-list="${properties.link}">
    <li><p>${items}</p></li>
</ul>

但是有没有办法将两个属性都列在一个元素中，看起来像这样：

<ul data-sly-repeat.breadcrumbs="${properties}">
    <li>
        <a href="${breadcrumbs.text}">
            ${breadcrumbs.link}
        </a>
    </li>
</ul>

我也尝试过 data-sly-use 使用自定义 js 文件，但也无法让多个属性在一个元素中循环。

Answer 1

I'd strongly recommend going with a multifield that stores the fields as JSON or nodes like ACS multifield so you get a better data structure for your purpose. I do not recommend the below solution unless you are 100% certain that both link and text are going to be the same length AND in the correct order.

就是说，假设文本和 link 都是多值属性，您可以执行以下操作：

<ul data-sly-list.textItem="${properties.text}">
    <li>
        <a data-sly-attribute.href="${properties.link[textItemList.index]}">
            ${textItem}
        </a>
    </li>
</ul>

这将打印：

ul>
    <li>
        <a title-href="link1">

        </a>
    </li>

    <li>
        <a title-href="link2">

        </a>
    </li>
</ul>

由于 data-sly-list 的 var 名称，创建了自定义标识符 textItemList。我们对 textItemList 上的成员 index 感兴趣，并使用它在 link 中的相同索引处显示该项目，方法是：properties.link[textItemList.index]

阅读更多关于 data-sly-list in the spec

*注意：您也可以使用 data-sly-repeat

当每个字段有多个值时如何循环遍历 AEM 多字段组件

How to loop through AEM multifield component when each field has multiple values

html

javascript

aem