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

Question

我创建了一个自定义多字段组件（名为“面包屑”），将用作页面的面包屑导航。每个多字段项由一个文本字段和一个路径浏览器组成。我想将每个多字段项目列为锚标记，其中“文本”属性作为文本，“链接”属性作为 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>

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

Answer 1

我强烈建议使用将字段存储为 JSON 或 ACS 多字段之类的节点的多字段，以便您获得更好的数据结构。我不推荐以下解决方案，除非您 100% 确定 link 和 text 的长度相同且顺序正确。

也就是说，假设 text 和 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 的变量名称，自定义标识符textItemList 被创建。我们对textItemList 上的成员index 感兴趣，并使用它在link 中的相同索引处显示项目：properties.link[textItemList.index]

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

*注意：您也可以使用data-sly-repeat 进行此操作