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

Posted 2023-02-22

【中文标题】update="@(.myClass)" 中的 PrimeFaces 选择器如何工作？

【英文标题】：How do PrimeFaces Selectors as in update="@(.myClass)" work?

【发布时间】：2013-12-03 13:19:59

【问题描述】：

我不明白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，有什么需要注意的吗？

【参考方案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>

【讨论】：

谢谢！很好的解释。现在我知道我的问题是什么了。我并不总是在非NamingContainer 组件上使用id 属性。

所以更清楚一点，由于rendered="false" 而当前不在DOM 中的组件不能通过直接在update 中选择它们而受到影响。但是，可以通过选择父项来更新它们。例如update="@(#container :button) 将不起作用，但update="@(#container) 会。如果需要，请纠正我@BalusC！ :)

@Daniel：这并不特定于 PFS。使用标准 JSF 客户端 ID 时，您将面临完全相同的问题。另请参阅***.com/questions/9010734/…

我正在尝试从 ajax 异常处理程序 (Primefaces) 中按其类更新某些元素，但似乎任何通过其 id 选择多个组件的尝试都会遇到 @987654345 @ 信息。有谁知道这是否可能？

我们可以以编程方式更新“myclass”吗？我已经尝试了omnifcaes Ajax.update("@(.myclass)") 和其他方法的其他变体，例如primefaces 方法，但没有奏效。有没有一种简单的方法来以编程方式更新课程？