在AEM 6对话框中有条件地显示/隐藏字段

Question

我正在使用一个简单的创作对话框构建一个相对简单的AEM组件.在我的对话框顶部是一个选择字段.当此选择字段设置为特定项时,我希望对话框中的某些字段消失.

我已经研究了Foundation Carousel组件的实现,它使用了cq-dialog-dropdown-showhide-target属性,这很好,但不是我想要的逻辑.那里使用的逻辑是:

如果select等于X,则显示此字段

而我正在尝试实施:

如果select等于X,Y或Z,则隐藏此字段,否则显示它

有没有其他人在对话框中实现这种逻辑有困难？

先感谢您!

戴夫

Answer 1

对于TouchUI对话框,实际上没有在ExtJS框架中大量使用的插件注册表.这一次,我们实际上可以通过使用clientlibs和jQuery来实现所有的魔力.

看一下你可以在这里找到的基本实现: /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide.js

这是一个附加到cq.authoring.dialog类别的clientlibs,需要granite.jquery在之前进行初始化.请参阅clientlibs文档以了解有关它的更多信息.该脚本本身是调用从花岗岩文档参数和jQuery一个匿名函数(见最后一行的脚本:})(document,Granite.$);)

如果给定的功能对您来说不够,您可以使用类似的简单javascript函数创建自己的clientlib,以处理更复杂的条件.另请注意,放置在"小部件"节点中的任何属性都将作为数据属性放置在生成的html中.

对于节点(例如/libs/foundation/components/carousel/cq:dialog/content/items/list/items/column/items/orderBy,你希望当一些情况发生的地方属性来隐藏):hideWhen =儿童,搜索(不让它数组作为它不会被正确地铸造在JS字符串).将下拉选择器(/libs/foundation/components/carousel/cq:dialog/content/items/list/items/column/items/listForm@cq-dialog-dropdown-hidefor-target)指向适当的类,另一方面,您将分配给可隐藏字段.

|-listFrom(select)
| |--@cq-dialog-dropdown-hidefor-target=.orderByClass
|
orderBy(autocomplete)
  |--@hideFor=children,search
  |--@class=orderByClass

你的案例的javascript方法可能看起来像这样:

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

    // when dialog gets injected
    $(document).on("foundation-contentloaded", function(e) {
        // if there is already an inital value make sure the according target element becomes visible
        showHide($(".cq-dialog-dropdown-showhide", e.target))  ;
    });

    $(document).on("selected", ".cq-dialog-dropdown-showhide", function(e) {
        showHide($(this));
    });

   function showHide(el){
       var widget =  el.data("select");

       if (widget) {

           // get the selector to find the target elements. its stored as data-.. attribute
           var target = el.data("cqDialogDropdownHideforTarget");

           // get the selected value
           var value = widget.getValue();

           // make sure all unselected target elements are hidden.
           var hideFor = $(target).data('hidefor').split(',');

           $(target).not(".hide").addClass("hide");

           // unhide the target element that contains the selected value as data-showhidetargetvalue attribute
           if (hideFor.indexOf(value) == -1) {
               $(target).removeClass("hide");
           }
       }
   }

在这种情况下隐藏输入标签存在一些问题,因此将字段包装到节中可能是个好主意(花岗岩/ ui/components/foundation/well)