如何在PrimeFaces中使用闭包在CommandButton上定义一个oncomplete事件？

Question

我正在使用一些JavaScript交互扩展PrimeFaces应用程序的一部分.这一切都始于CommandButton从bean获取一些数据然后调用JavaScript.目前,它看起来像这样:

<p:commandButton actionListener="#{myBean.doSomething}"
                                 oncomplete="doSomethingSimple()"
                                 value="Do something" />

当然,这是非常简单的基于功能的编程.没有上下文,没有闭包,没有OOP(如果我需要一些).我想将一个普通的JavaScript事件附加到CommandButton,例如使用jQuery:

$('.myCommandButton').on('complete', function () {
     ...
})

但是,complete不是DOM事件,基本上只有PrimeFaces知道它何时被调用.是否还有一种方法可以将基于属性的脚本替换为"普通"JavaScript事件处理？

Answer 1

PrimeFaces使用jQuery来处理ajax请求.所以,可以挂钩通用$.ajaxComplete()处理程序.源可用作第三个参数的属性options:

$(document).ajaxComplete(function(event, xhr, options) {
    var $source = $("[id='" + options.source + "']");

    if ($source.hasClass("myCommandButton")) {
        // ...
    }
});

或者,如果您使用的是PrimeFaces 4.0或更高版本,请在特定于PrimeFaces的pfAjaxComplete事件上挂钩:

$(document).on("pfAjaxComplete", function(event, xhr, options) {
    var $source = $("[id='" + options.source + "']");

    if ($source.hasClass("myCommandButton")) {
        // ...
    }
});

或者,如果您将PrimeFaces与"普通"HTML/jQuery混合,并希望同时适用于:

$(document).on("ajaxComplete pfAjaxComplete", function(event, xhr, options) {
    var $source = $("[id='" + options.source + "']");

    if ($source.hasClass("myCommandButton")) {
        // ...
    }
});

无论如何,因此$source表示触发了ajax动作的原始HTML DOM元素的jQuery对象,在这个特定示例的情况下<p:commandButton>就是自身.这使您可以通过检查元素的类将其进一步委托给所需的处理程序.