1

我依赖于从 AEM cq-dialog 获取 json 结构（或类似的东西）到渲染页面的 DOM，在那里我通过渲染页面的 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-dialog 中的所有“标签”属性作为一个属性获取到模板吗？

我的对话框有几个字段，如下所示，tab1 上的所有属性都被认为是“标签”属性（因此应该添加到#myApp 元素的 data-labels 属性中）。

<?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>
...
4

1 回答 1

2

您可以编写自定义 ExtJs 小部件以将 JCR 中的数据作为 JSON 字符串存储，或者编写一段后端（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对象做什么，看看ValueMapjavadoc

于 2015-10-27T23:34:53.673 回答