AEM——如何循环组件子节点_Aem_Sightly

AEM——如何循环组件子节点

aem

AEM——如何循环组件子节点,aem,sightly,Aem,Sightly,我有一个用于容纳子组件的“容器”组件。本质上，是一个用于容纳内容选项卡的容器，用户可以在其中拖动任意多个“选项卡” 守则如下：  <div data-sly-test="${wcmmode.edit}"><h2>Drag a 'Tab Panel' below:</h2></div> <ul data-sly-list.tab="${list of child

我有一个用于容纳子组件的“容器”组件。本质上，是一个用于容纳内容选项卡的容器，用户可以在其中拖动任意多个“选项卡”

守则如下：

<!--/* Tab Container Component */-->
<div data-sly-test="${wcmmode.edit}"><h2>Drag a 'Tab Panel' below:</h2></div>
<ul data-sly-list.tab="${list of children in the tab-container parsys}">
    <li>${tab.tabName}</li> //these will be the tabs using jQuery-UI
</ul>
<div data-sly-resource="${ @path='tab-container',resourceType='wcm/foundation/components/parsys'}" data-sly-unwrap></div>


拖动下面的“选项卡面板”：

${tab.tabName}//这些将是使用jQuery UI的选项卡

以及“选项卡”组件：

<!--/* Tab Panel Component */-->
<div class="tab-panel">
<div data-sly-resource="${ @path='tab-   panel',resourceType='wcm/foundation/components/parsys'}" data-sly-unwrap></div>
</div>

我想要实现的是使用容器组件在其parsys中循环项目，并提取每个项目的属性“tabName”。节点结构结束时如图所示：

这可能适用于您的情况：

<ul data-sly-list.tab="${resource.listChildren}">
    <li>${tab.name}</li> //these will be the tabs using jQuery-UI
</ul>


${tab.name}//这些将是使用jQuery UI的选项卡

基本上，

选项卡容器

是您的parsys和

资源。listChildren

将列出所有

子资源/节点<代码>选项卡名称

由

HTL

提供，它将为您提供

tab\u面板、tab\u面板\u 1134..等

。也可以访问每个

选项卡面板（选项卡）

内的其他属性

另一种直接访问资源的方法是使用

数据访问

：

有了它，您可以访问AEM中的任何资源。（查找与资源一起使用的
```
数据
```
）

祝你好运