AEM

Question

我正在尝试弄清楚如何从我希望也传递到数据源的路径字段中为 select 字段刷新花岗岩数据源。

基本上：

设置将查看内容片段模型的路径 (pathToOptions)
Datasource 被调用，每次对话框中的路径值发生变化，Sling Servlet 检索内容片段的所有字段

作者对话框生成选项，用于花岗岩 select 下拉列表 (cfOptions)，以及来自数据源的字段。

 <pathToOptions jcr:primaryType="nt:unstructured"
     sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
     fieldLabel="CF Path"
     rootPath="/content"
     name="./pathToOptions"/>
 <cfOptions jcr:primaryType="nt:unstructured"
     sling:resourceType="granite/ui/components/coral/foundation/form/select"
     fieldLabel="CF Options"
     name="./cfOptions">
     <datasource jcr:primaryType="nt:unstructured"
         sling:resourceType="/bin/path/to/servlet"/>
 </resProperties>

(变量名和路径只是通用的)

对 AEM Granite 数据源和 Apache Sling 了解不多 API；是否有数据源的可行方法，或者我需要依赖 AJAX。如果是后者，我会 post 跟进问题。

Answer 1

经过一些研究；结果证明无法使用数据源执行此操作，而是使用 AJAX ($.ajax()) 与 Sling Servlet 通信以实现必要的功能。

https://helpx.adobe.com/experience-manager/using/creating-touchui-dynamic.html

我使用此文档作为执行功能的基础，但根据我的规格进行了调整。

(function ($, $document) {
    "use strict";

    var LANGUAGE = "./language", COUNTRY = "./country";

    function adjustLayoutHeight(){
        $(".coral-FixedColumn-column").css("height", "20rem");
    }
 
    $document.on("dialog-ready", function() {
        adjustLayoutHeight();
     
        // Getting reference of language drop down field
        var language = $("[name='" + LANGUAGE +"']").closest(".coral-Select")
     
        // Initializing country drop down field
        var country = new CUI.Select({
            element: $("[name='" + COUNTRY +"']").closest(".coral-Select")
        });
     
        if(_.isEmpty(country) || _.isEmpty(language)){
            return;
        }
     
        var langCountries = {};
     
        country._selectList.children().not("[role='option']").remove();
     
        function fillCountries(selectedLang, selectedCountry){

            var x = $("[name='./country']").closest(".coral- Select").find('option').remove().end();
            _.each(langCountries, function(value, lang) {

                if( (lang.indexOf(selectedLang) !== 0) || (value.country == "*") ){
                    return;
                }

                var test2 = $("[name='./country']")[0];

                $("<option>").appendTo(test2).val(lang).html(value.country);

            });

            country = new CUI.Select({
                element: $("[name='" + COUNTRY +"']").closest(".coral-Select")
            });
         
         
            if(!_.isEmpty(selectedCountry)){             
                country.setValue(selectedCountry);     
            }
         
        }
     
        //listener on language select for dynamically filling the countries on language select
        language.on('selected.select', function(event){
            console.log(event);
            fillCountries(event.selected);
        });
     
        // Get the languages list from the source
        $.getJSON("/libs/wcm/core/resources/languages.2.json").done(function(data){
            langCountries = data;
         
            var $form = country.$element.closest("form");
         
            //get the second select box (country) saved value
            $.getJSON($form.attr("action") + ".json").done(function(data){
                if(_.isEmpty(data)){
                    return;
                }

                // Passing values to populate countries list
                fillCountries(language.val(), data.country);
            })
        });
    });
})($, $(document));

此片段源自文章。我只应用它以防万一 link 死了。我已经看到很多 Adobe 的论坛帖子都有 404 links，所以添加这个作为预防措施以备将来参考。

AEM - 花岗岩场更改后刷新数据源

AEM - Refresh datasource after granite field change

xml

sling

aem-touch-ui