Question

我依赖于从AEM cq对话框到渲染页面的DOM获取json结构（或类似的东西），在那里我通过渲染页面的JS来获取它。

明亮的页面模板如下所示，这里的数据标签是一个包含对话框字段的json。如您所见，我已手动输入所有字段/属性：

<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对话框中的所有“标签”属性作为一个属性获取到模板吗？

我的对话框有几个字段，如下面所示，tab1上的所有属性都被视为“标签”属性（因此应添加到#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 Models，您可以编写一个使用类或使用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代码中的每个键），您可以迭代所有属性并在构建JSON对象时过滤它们。

这是JavaScript中一个粗略的例子，它读取当前资源的所有属性并将它们放在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代码中相同的API。很抱歉奇怪的类型转换，但由于某种原因，stringify抱怨检索到的对象，除非我通过添加空字符串来强制执行类型"" +的技巧我不倾向于在我的后端代码中使用JS，所以我对这种特殊风格并不熟悉。

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

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

1 个答案: