Question

我想在Coral UI 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));

sling:resourceType标签字段是特定于Coral UI 3的：cq/gui/components/coral/common/form/tagfield

但是未捕获此事件。如果我将标签字段资源类型更改为特定于旧的触摸UI的sling:resourceType为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

珊瑚标签列表中的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中检查添加标签的事件

1 个答案: