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

Question

我不明白PrimeFaces selectors (PFS) 的工作原理。

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

我可以使用它。我认为这是一个很棒的工具，尽管它并不总是对我有用。 .myClass 是客户端 jQuery 选择器。服务器端的 JSF 如何知道要更新什么？

我可以理解JSF ID selectors 的正常工作方式。

<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。 IE。 <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>