AEM Sightly - 如何遍历组件子节点

Question

我有一个用于容纳子组件的“容器”组件。基本上，用于保存内容标签的容器，用户可以在其中拖动尽可能多的“标签”。

代码是这样的：

<!--/* 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'组件：

<!--/* 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”。节点结构最终如图所示：

Answer 1

这可能适用于您的情况：

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

基本上，tab-container是您的parsys，resource.listChildren将列出所有child resources/nodes。 tab.name由HTL提供了tab_panel, tab_panel_1134.., etc.。每个tab-panel (tab)内的其他属性也可以访问。

直接访问资源的另一种方法是使用data-sly-use：

• 使用此功能，您可以访问AEM中的任何资源。 Docs here（查找data-sly-use with resources）。

祝你好运...