AEM HTL 使用 data-sly-repeat 重复包含 "data-sly-resource" 的元素

Question

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

我有一个 table 元素，其中每个单元格都有一个使用子组件的 individual 创作界面。我得到两个计数，即 rowCount 作为 "x" 的数组和 columnCount 作为 [= 的数组21=]"y"。我能够遍历 class="table-cell" 并且能够添加 "y" 使用 data-sly-resource 的列数及其各自的子组件。但是，当我尝试使用 class="table-row" 遍历 rowcount 时，它只会迭代内容并添加“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

Answer 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>

AEM HTL 使用 data-sly-repeat 重复包含 "data-sly-resource" 的元素

AEM HTL repeating an element containing "data-sly-resource" using data-sly-repeat

aem

sightly