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>

我还尝试使用自定义js文件进行数据狡猾的使用，但也无法在一个元素中循环使用多个属性。

Answer 1

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

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

<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。我们对index上的成员textItemList感兴趣并使用它来link中显示properties.link[textItemList.index]中相同索引的项目：data-sly-repeat

详细了解data-sly-list in the spec

*注意：您也可以使用nav ul{float: left;clear:both;}

执行此操作

当每个字段具有多个值

1 个答案: