从 cq-dialog 到 dom 模板 AEM 的多个属性

Question

我依赖于从 AEM cq-dialog 到渲染页面的 DOM 获取 json-结构（或类似的东西），我在渲染页面的 DOM 中获取它JS.

视觉页面模板如下所示，这里的数据标签是 json，其中包含对话框的字段。如您所见，我手动输入了所有 fields/properties:

<div id="myApp"
     data-service="${properties.applicationService}"
     data-labels="{&quot;title&quot;:&quot;${properties.title}&quot;,&quot;sub1&quot;:&quot;${properties.sub1}&quot;,&quot;number&quot;:&quot;${properties.number}&quot;}"></div>

我更喜欢能够更动态地拾取所有标签：data-labels = ${properties.labels}

我可以将 cq-dialog 中的所有 "label" 属性作为一个属性获取到模板吗？

我的对话框有如下几个字段，tab1 上的所有属性都被视为 "label" 属性（因此应该添加到 #myApp 元素的数据标签属性中）。

<?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"
          jcr:primaryType="cq:Dialog"
          title="my Application"
          xtype="dialog">
    <items jcr:primaryType="cq:WidgetCollection">
        <tabs jcr:primaryType="cq:TabPanel">
            <items jcr:primaryType="cq:WidgetCollection">
                <tab1
                        jcr:primaryType="cq:Widget"
                        title="Texts and Labels"
                        xtype="panel">
                    <items jcr:primaryType="cq:WidgetCollection">
                        <title
                                jcr:primaryType="cq:Widget"
                                fieldDescription="The title of the page."
                                fieldLabel="blablabla"
                                name="./title"
                                defaultValue="default value..."
                                xtype="textfield"/>
                        <sub1
                                jcr:primaryType="cq:Widget"
                                fieldDescription="First subtitle"
                                fieldLabel="blablba"
                                name="./subtitle1"
                                defaultValue="default value..."
                                xtype="textfield"/>
                        <number
                                jcr:primaryType="cq:Widget"
                                fieldDescription="The textfield label for number."
                                fieldLabel="number"
                                name="./number"
                                defaultValue="number"
                                xtype="textfield"/>
                    </items>
                </tab1>
...

Answer 1

您可以编写自定义 ExtJs 小部件以将数据作为 JSON 字符串存储在 JCR 中，或者编写一段后端（Java 或 JavaScript）代码来读取属性并将它们放入 JSON 对象中。就个人而言，我赞成后一种方法。

这是一个使用 Sling Models 的例子：

package com.mycompany.myproject.blah;

//imports, whatever

@Model(adaptables = Resource.class)
public class ItemsModel {

     // Properties will be injected by Sling Models from the current resource

     @Inject
     private String title;

     @Inject
     private String subtitle1;

     @Inject
     private String number;

     public String getJson() {
          // use String concatenation to build a JSON document
          // or create a JSON object using Gson or a similar library
          // and serailize it to String
     }
}

然后在您的 Sightly 文件中，您可以调用模型

<div id="myApp" data-sly-use.model="com.mycompany.myproject.blah.ItemsModel"
     data-service="${properties.applicationService}"
     data-labels="${model.json}"></div>

如果您不想或不能使用 Sling 模型，您可以写一个使用 class 或使用 JavaScript Use-API 来获得类似的结果。

在您的组件文件夹中，创建一个 JS 文件，我们将其命名为 items.js，它可能如下所示：

"use strict";
use(function () {
    var items= {};
    items.title = "" + properties.get("title");
    items.sub1 = "" + properties.get("sub1");
    items.number = "" + properties.get("number");
    return JSON.stringify(items);
});

要在您的 Sightly 脚本中使用它，请通过 data-sly-use:

调用它

<div id="myApp" data-sly-use.items="items.js"
     data-service="${properties.applicationService}"
     data-labels="${items}"></div>

如果您想以更动态的方式检索多个属性（无需在 Java/JS 代码中指定每个键），您可以在构建 [=49] 时迭代所有属性并过滤它们=]对象。

这是 Java脚本中的一个有点粗略的示例，它读取当前资源的所有属性并将它们放入 JSON 字符串中：

"use strict";
use(function () {
    var result = {},
        i,
        keys,
        key;
    keys = properties.keySet().toArray();
    for (i = 0 ; i < keys.length ; i ++) {
        key = keys[i];
        result["" + key] = "" + properties.get(key);
    }
    return JSON.stringify(result);
});

恐怕 JavaScript API 没有明确的文档，因为您有效地使用了与 Java 中相同的 APIs代码。对奇怪的类型转换感到抱歉，但出于某种原因，stringify 抱怨检索到的对象，除非我通过在前面加上一个空字符串来强制执行类型 "" + 来解决问题我倾向于不在我的后端代码中使用 JS，所以我不是很熟悉这种特殊的风格。

如果您想了解可以使用 properties 对象做什么，请查看 ValueMap javadoc

从 cq-dialog 到 dom 模板 AEM 的多个属性

Multiple properties from cq-dialog to dom template AEM

aem

jcr

jackrabbit

sightly