时间戳

首页 > 解决方案 > 如何在 Coral UI 3 中检查标签添加事件

aem - 如何在 Coral UI 3 中检查标签添加事件

问题描述

我想在 Coral UI 3 中选择标签字段时捕获标签添加和删除事件。我已将其添加到类别为cq.authoring.dialog.all.

(function($, $document) {
    $document.on("dialog-ready", function() {
        $('[data-fieldname="./cq:tags"]').on('itemadded', function(ev, value) {
            console.log("Tag added");
        });
    });
})($, $(document));

of tag 字段是特定于sling:resourceTypeCoral UI 3 的：cq/gui/components/coral/common/form/tagfield

但是这个事件没有被捕获。如果我将标签字段资源类型更改为特定于旧的 Touch UI sling:resourceType，cq/gui/components/common/tagspicker那么它可以工作。

如何在 Coral UI 3 标签字段中捕获事件？

标签： aem

解决方案

如果您查看/libs/cq/gui/components/coral/common/form/tagfield/render.jsp（至少在 AEM 6.4 中），您会看到它呈现以下 HTML 结构：

<foundation-autocomplete>
    <coral-overlay></coral-overlay>
    <coral-taglist>
    ...
    </coral-taglist>
</foundation-autocomplete>

foundation-autocomplete的文档可以在这里找到：https ://helpx.adobe.com/experience-manager/6-4/sites/developing/using/reference-materials/granite-ui/api/jcr_root/libs/granite/ui/ components/coral/foundation/clientlibs/foundation/js/autocomplete/index.html

但是您感兴趣的coral-taglist是这里的文档：https ://helpx.adobe.com/experience-manager/6-4/sites/developing/using/reference-materials/coral-ui/coralui3/Coral .TagList.html

珊瑚标签列表中的items类型是Coral.Collection其文档在此处：https://helpx.adobe.com/experience-manager/6-4/sites/developing/using/reference-materials/coral-ui/coralui3/Coral。 Collection.html#Coral.Collection:事件

所以你可以做类似的事情：

document.querySelector(<coral-taglist element selector>).on('coral-collection:add', function () {
  // handle add
})

document.querySelector(<coral-taglist element selector>).on('coral-collection:remove', function () {
  // handle remove
})

推荐阅读