如何在 Coral UI 3 中查看标签添加事件

Question

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

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

tag字段的sling:resourceType是CoralUI3具体：cq/gui/components/coral/common/form/tagfield

但是没有捕捉到这个事件。如果我将标记字段资源类型更改为旧的 Touch UI specific sling:resourceType as cq/gui/components/common/tagspicker 那么它就可以工作。

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

Answer 1

如果您查看 /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

coral-taglist 中的 items 属于 Coral.Collection 类型，其文档在此处：https://helpx.adobe.com/experience-manager/6-4/sites/developing/using/reference-materials/coral-ui/coralui3/Coral.Collection.html#Coral.Collection:events

所以你可以这样做：

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
})

如何在 Coral UI 3 中查看标签添加事件

How to check Tag added event in Coral UI 3

aem