aem - AEM 6 对话框中字段的条件显示/隐藏

Question

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

我研究了 Foundation Carousel 组件的实现，它使用了 cq-dialog-dropdown-showhide-target属性，这很好，但不是我正在寻找的逻辑。那里使用的逻辑是:

如果选择等于 X ，则显示此字段

而我正在尝试实现:

如果选择等于 X、Y 或 Z，则隐藏此字段，否则显示它

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

先感谢您!

戴夫

Answer 1

对于 TouchUI 对话框，实际上没有在 ExtJS 框架中大量使用的插件注册表。这一次，我们实际上可以只使用 clientlibs 和 jQuery 来完成所有的魔术。

查看您所引用的基本实现，可在此处找到:/libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide.js
这是附加到 cq.authoring.dialog 的客户端库类别和要求 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");
           }
       }
   }

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