如何使用sightly从Adobe AEM的列表中访问嵌套的子属性？

我正在尝试访问包含“标题”和“url”的项目列表。我想访问“项目”或“url”，但不确定如何访问

子项是可访问的，但具有：

• ${child}//打印如下{“title”：“Hello”，“url”：“www.Hello.com”}

• 但是${child.url}或${child['url'}不打印任何内容

这是我的html：

<div data-sly-use.model="au.com.nbnco.website.model.components.Links">
    <h6>${properties.linksTitle @ context="html"}</h6>
    <ul data-sly-list.child="${properties.links}">
        <li> ${child.url}</li>  // not printing anything
        <li> ${child.['url']}</li>  // not printing anything
        <li> ${child}</li> // prints like this {"title":"Hello","url":"www.hello.com"}
    </ul>
</div>

${properties.linksTitle@context=“html”}

${child.url}
//不打印任何内容
${child。['url']}
//不打印任何内容
${child}
//打印如下{“title”：“Hello”，“url”：“www.Hello.com”}

这是我的dialog.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="cq:Dialog"
          width="640"
          height="480"
          xtype="dialog">
    <items
            jcr:primaryType="cq:Widget"
            xtype="tabpanel">
        <items jcr:primaryType="cq:WidgetCollection">
            <configurations
                    jcr:primaryType="cq:Panel"
                    title="Configuration">
                <items jcr:primaryType="cq:WidgetCollection">
                    <links_title
                            jcr:primaryType="nt:unstructured"
                            fieldLabel="Links Title"
                            name="./linksTitle"
                            defaultValue="Links"
                            xtype="textfield"/>
                    <links
                            jcr:primaryType="cq:Widget"
                            name="./links"
                            title="Links"
                            xtype="multifield">
                        <fieldConfig
                                jcr:primaryType="cq:Widget"
                                border="true"
                                layout="form"
                                padding="5px"
                                xtype="multi-field-panel">
                            <items jcr:primaryType="cq:WidgetCollection">
                                <title
                                        jcr:primaryType="cq:Widget"
                                        dName="title"
                                        fieldLabel="Title"
                                        xtype="textfield"/>
                                <url
                                        jcr:primaryType="cq:Widget"
                                        dName="url"
                                        fieldLabel="Url"
                                        xtype="textfield"/>
                            </items>
                        </fieldConfig>
                    </links>
                </items>
            </configurations>
        </items>
    </items>
</jcr:root>

看起来

链接

属性存储为多个JSON字符串。HTL/Sightly不解析为JSON字符串。您需要使用api对象来解析JSON并输出属性。

您应该能够访问属性url和标题，如下所示：

${child.properties.url}
${child.properties.title}

HTL不会解析您的对象。您可以使用JS helper函数解析您的元素

<sly data-sly-list.jsonLinks="${properties.links}">
<ul data-sly-use.parsedLinks="${'../parseMyJson.js' @ element=jsonLinks}">
<li>${parsedLinks.title}</li>
<li>${parsedLinks.url}</li>
</ul>
</sly>

---

正如我看到的，您根本不使用模型，而是使用属性访问项。而且，子元素中可能没有getter

use(function () {
    var element = this.element;
    if (element) {
        element = JSON.parse(element);
    }
    return element;
});