Несколько свойств из шаблона cq-dialog to dom AEM

Question

Я зависим от получения json-структуры (или чего-то подобного) из диалогового окна AEM cq-DOM на 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).

<?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 виджет для хранения данных в 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 
    } 
} 

Затем в красивый файл, вы можете позвонить в Типовых

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

Если вы не хотите или не можете использовать Стропальщик модели, вы могли бы напишите класс использования или используйте 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); 
}); 

Чтобы использовать его в красивый сценарий, вызовите его через 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); 
}); 

Боюсь, что нет никакой явной документации по API JavaScript, потому что вы находитесь эффективно используя те же API, что и в коде Java. Извините за странные преобразования типов, но по какой-то причине stringify жаловался на найденные объекты, если только я не сделал трюк с добавлением пустой строки, чтобы ввести в действие тип "" + Я, как правило, не использую JS в своем внутреннем коде, поэтому я не очень знакомый с этим особым стилем.

Если вы хотите, чтобы выяснить, что вы можете сделать с properties объекта, посмотрите на ValueMap javadoc