jsf - 更新=“@(.myClass)”中的PrimeFaces选择器如何工作？

我不了解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引用服务器树XHTML文件中定义的组件树中组件的ID。因此，我可以了解JSF如何找到正确的组件。

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

最佳答案

您可能已经知道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>不是必需的。



您可能会选择“太多”(例如@(form)不选择当前形式，而是所有形式，与jQuery中的$("form")完全一样!)，或者您实际上什么也没有选择(当所需的HTML DOM元素实际上没有ID时) 。 HTML DOM树中的元素ID和HTTP流量监视器中的请求有效负载应该提供线索。

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

在您的特定示例中，<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>

关于jsf - 更新=“@(.myClass)”中的PrimeFaces选择器如何工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20080861/