更新="@(.myClass)"中的PrimeFaces选择器如何工作？

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引用服务器端XHTML文件中定义的组件树中组件的ID。所以我可以理解JSF是如何找到正确的组件的。

但是，如果您使用的是素数面选择器，则会使用客户端jQuery选择器。JSF如何知道哪个组件必须更新？有时我在PFS方面有问题。它似乎并不总是对我有用。如果你使用PFS，你应该记住什么吗？

Answer 1

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

基本上，对于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)不选择当前表单，但所有表单，与jQuery中的$("form")完全相同！），或者您实际上什么都没有选择（当所需的HTML DOM元素实际上没有ID时）。调查HTML DOM树中的元素ID和HTTP流量监视器中的请求负载应该会提供线索。

HTML DOM树中所需的元素必须具有（自动生成的）ID。HTTP流量监视器中的javax.faces.partial.render请求参数必须包含正确的客户端ID。JSF组件树中元素的rendered属性在更新期间必须评估true。等等。

在您的特定示例中，<h:outputText>不会以任何ID出现在生成的HTML输出中。为其分配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>