AEM使用data-sly-list="${properties.featureList}"循环不出数据

Question

Adobe Experience Manager (AEM)组件开发

div class="cp-hero-image-card__sublist-subitem" data-sly-list="${properties.featureList}">
              <div class="cp-hero-image-card__sublist-subitem-title">
                ${item.featureTitle @ context='html'}
            </div>
            <div class="cp-hero-image-card__sublist-subitem-desc">
                ${item.featureDesc @ context='html'}
            </div>
        </div>

使用data-sly-lis循环数据，循环不出来
featureList配置

                                    <featureList
                                          granite:class="coral-marker-multifield"
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                        composite="{Boolean}true"
                                        fieldLabel="Feature List"
                                        name="./featureList">
                                        <granite:data
                                            jcr:primaryType="nt:unstructured"
                                            max="2"
                                            min="0"/>
                                        <field
                                            granite:class="multifield-item-accordion"
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/accordion"
                                            name="./featureList">
                                            <items jcr:primaryType="nt:unstructured">
                                                <featureItem
                                                    jcr:primaryType="nt:unstructured"
                                                    jcr:title="Feature item"
                                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <featureTitle
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                            fieldLabel="Feature Title"
                                                            name="./featureTitle"/>
                                                        <featureDesc
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
                                                            fieldLabel="Feature Describe"
                                                            name="./featureDesc"/>
                                                    </items>
                                                </featureItem>
                                            </items>
                                        </field>
                                    </featureList>

Answer 1

引自免费微信小程序：皆我百晓生

在Adobe Experience Manager (AEM)中使用data-sly-list循环显示数据时，如果循环没有正确工作，可能有几个常见的原因。以下是一些步骤和建议，可以帮助你解决这个问题：

1. 确认featureList是否正确传递： 确保在组件的属性中，featureList被正确地设置并传递给模板。你可以在AEM的调试模式下查看组件的数据绑定是否成功获取了featureList。

2. 检查data-sly-list语法： 确保data-sly-list的语法是正确的。在你的例子中，语法看起来是正确的。但是，确保properties.featureList确实包含了一个数组或列表。

3. 验证数据结构： featureList中的每个元素（item）应该包含featureTitle和featureDesc属性。根据你提供的JCR结构，这看起来是正确的。然而，要确保在实际的数据模型中，这些字段已经被填充并且可以访问。

4. 检查模板渲染逻辑： 确保在你的模板文件中，data-sly-list相关的代码没有被错误地注释掉或格式化错误导致的问题。同时，确保没有其他逻辑阻止data-sly-list的执行。

5. 清理缓存： 如果你在开发过程中修改了组件或模板，记得清理AEM的缓存，确保你看到的是最新的更改结果。

6. 使用AEM的调试工具： AEM提供了一些调试工具，例如使用data-sly-use和data-sly-log来输出变量的值，这可以帮助你理解featureList的实际情况。

7. 检查组件配置： 确保组件的配置允许动态内容的渲染，并且featureList字段已经正确地映射到模板。

8. 查看控制台错误： 检查浏览器的开发者控制台是否有任何JavaScript错误，这可能会揭示问题所在。

如果你遵循了上述步骤但仍然遇到问题，可以尝试以下的代码片段，这是一个更详细的示例，如何在AEM中使用data-sly-list：

<div data-sly-list="${properties.featureList}">
    <div class="cp-hero-image-card__sublist-subitem">
        <div class="cp-hero-image-card__sublist-subitem-title" data-sly-test="${item.featureTitle}">
            ${item.featureTitle @ context='html'}
        </div>
        <div class="cp-hero-image-card__sublist-subitem-desc" data-sly-test="${item.featureDesc}">
            ${item.featureDesc @ context='html'}
        </div>
    </div>
</div>

在这个示例中，data-sly-test用于确保只有当item.featureTitle和item.featureDesc存在时，相应的HTML才被渲染。这有助于防止潜在的undefined引用错误。

最后，如果问题依然存在，考虑查阅AEM官方文档或社区论坛，看看是否有类似问题的讨论或解决方案。