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 documentation以了解有关它的更多信息。脚本本身是一个匿名函数，使用文档参数和花岗岩中的jQuery调用（参见脚本中的最后一行：})(document,Granite.$);）

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

对于要在某些条件发生时隐藏的节点（例如/libs/foundation/components/carousel/cq:dialog/content/items/list/items/column/items/orderBy），可以放置属性：hideWhen = children，search（不要将其设为数组，因为它不能正确地转换为字符串在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）可能是个好主意

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

1 个答案: