PrimeFaces选择器如何在update ="@(.myClass)"中工作？

Question

我不明白PrimeFaces选择器(PFS)是如何工作的.

<h:outputText value="#{bean.text1}" styleClass="myClass" />
<p:commandButton update="@(.myClass)" />

我可以用它.我认为这是一个很棒的工具,虽然它并不总是对我有用.的.myClass是客户端jQuery选择.服务器端的JSF如何知道要更新的内容？

我可以理解正常的JSF ID选择器是如何工作的.

<h:outputText value="#{bean.text1}" id="textId" />
<p:commandButton update="textId" />

的textId组件树的引用部件的ID作为在XHTML文件中定义在服务器端.所以我可以理解JSF如何找到合适的组件.

但是如果使用的是primefaces选择器,则使用客户端jQuery选择器.JSF如何知道哪个组件必须更新？有时我的PFS有问题.它似乎并不总是对我有用.如果您使用PFS,是否应该记住哪些内容？

Answer 1

您可能已经知道PrimeFaces正在使用jQuery.PrimeFaces选择器基于jQuery.您指定的任何内容@(...)都将用作当前HTML DOM树上的jQuery选择器.对于任何找到的具有ID的HTML元素,该ID最终将被用于update.

基本上,对于一个update="@(.myclass)",PrimeFaces将覆盖大致这样做:

var $elements = $(".myclass");
var clientIds = [];

$.each($elements, function(index, element) {
    if (element.id) {
        clientIds.push(":" + element.id);
    }
});

var newUpdate = clientIds.join(" "); // This will be used as `update` instead.

所以,在例如的情况下

<h:form id="formId">
    <h:outputText id="output1" styleClass="myclass" ... />
    <h:outputText styleClass="myclass" ... />
    <h:outputText id="output3" styleClass="myclass" ... />
</h:form>

此命令按钮更新

<p:commandButton ... update="@(.myclass)" />

最终会产生完全相同的效果

<p:commandButton ... update=":formId:output1 :formId:output3" />

请注意,这也适用于自动生成的ID.即<h:form id>不是强制性的.

有时我的PFS有问题.如果你正在使用PFS,你应该记住什么？

您可能会选择"太多"(例如@(form),不选择当前表单,但所有表单,就像$("form")在jQuery中一样!),或者您实际上没有选择任何内容(当所需的HTML DOM元素实际上没有ID时).调查HTML DOM树中的元素ID和HTTP流量监视器中的请求有效负载应该提供线索.

HTML DOM树中的所需元素必须具有(自动生成的)ID.javax.faces.partial.renderHTTP流量监视器中的请求参数必须包含正确的客户端ID.renderedJSF组件树中的元素属性必须true在更新期间进行评估.等等.

在您的特定示例中,<h:outputText>不会以生成的HTML输出结束任何ID.分配它id应该可以通过更新来解决您的问题.

所以,这个例子不起作用

<h:form>
    <h:outputText value="#{bean.text1}" styleClass="myClass" />
    <p:commandButton value="Update" update="@(.myClass)" /> 
</h:form>

但是这个例子可行(请注意,不需要为表单分配ID):

<h:form>
    <h:outputText id="myText" value="#{bean.text1}" styleClass="myClass" />
    <p:commandButton value="Update" update="@(.myClass)" /> 
</h:form>