AEM HTL 使用 data-sly-repeat 重复包含“data-sly-resource”的元素答案

【问题标题】：AEM HTL repeating an element containing "data-sly-resource" using data-sly-repeatAEM HTL 使用 data-sly-repeat 重复包含“data-sly-resource”的元素
【发布时间】：2022-01-21 20:39:06
【问题描述】：

我正在尝试遍历包含“data-sly-resource”的 div 元素，以便能够将该组件包含为子组件。

我有一个表格元素，其中每个单元格都有一个使用子组件的单独创作界面。我得到两个计数，即 rowCount 作为 "x" 数组和 columnCount 作为 "y" 数组。我能够遍历 class="table-cell" 并能够使用 data-sly- 添加 "y" 列及其各自的子组件资源。但是，当我尝试使用 rowcount 迭代 class="table-row" 时，它只会迭代内容并添加“y”行但不添加行中的子组件

谢谢

<div class="table">

    <sly data-sly-list.card="${rowCount.array}">
        <div class="table-row">
            <sly data-sly-list.card="${columnCount.array}">
                <div class="table-cell" data-sly-test.resourceNode="${['cell', card.intValue] @join='-'}">
                    <div data-sly-resource="${ @path=resourceNode,
                     resourceType='example/components/content/tableLongForm/rte'}"
                        data-sly-unwrap="${!wcmmode.edit && !wcmmode.preview}" style="width:60px;"></div>
                </div>
            </sly>

        </div>
    </sly>
</div>

Authoring Interface Image

【问题讨论】：

标签： aem sightly

【解决方案1】：

您对嵌套循环中的列表项使用相同的标识符card，也许您的意思是：

<div class="table">

    <sly data-sly-list.row="${rowCount.array}">
        <div class="table-row">
            <sly data-sly-list.card="${columnCount.array}">
                <div class="table-cell" data-sly-test.resourceNode="${['cell', row.intValue, card.intValue] @ join='-'}">
                    <div data-sly-resource="${ @path=resourceNode,
                     resourceType='example/components/content/tableLongForm/rte'}"
                        data-sly-unwrap="${!wcmmode.edit && !wcmmode.preview}" style="width:60px;"></div>
                </div>
            </sly>

        </div>
    </sly>
</div>

【讨论】：

是的，更改标识符有效