如update ="@(.myClass)"中的PrimeFaces选择器如何工作?工作? [英] How do PrimeFaces Selectors as in update="@(.myClass)" work?

问题描述

我不明白 PrimeFaces选择器( PFS ).

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

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

I can use it. And I think it's a fantastic tool although it doesn't function always for me. The .myClass is client side jQuery selector. How does JSF on server side know what to update?

我可以理解 JSF ID的正常程度选择器起作用.

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

textId引用服务器端XHTML文件中定义的组件树中组件的ID.这样我就可以了解JSF如何找到正确的组件.

The textId references an ID of component in the component tree as defined in XHTML file in server side. So I can understand how JSF finds the right component.

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

But if you are using primefaces selectors, the client side jQuery selectors are used. How does JSF know which component has to be updated? Sometimes I have problems with PFS. It doesn't seem to function always for me. Is there something what you should keep in mind if you are using PFS?

推荐答案

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

You probably already know that PrimeFaces is using jQuery under the covers. PrimeFaces Selectors are based on jQuery. Anything which you specify in @(...) will be used as jQuery selector on the current HTML DOM tree. For any found HTML element, which has an ID, exactly this ID will ultimately be used in the update.

基本上，对于update="@(.myclass)"，PrimeFaces会在后台大致执行此操作:

Basically, for a update="@(.myclass)", PrimeFaces will under the covers roughly do this:

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>不是必需的.

Note that this also works for autogenerated IDs. I.e. the <h:form id> is not mandatory.

有时我在使用PFS时遇到问题.如果您使用的是PFS，您应该记住什么?

您可能会选择太多"(例如，@(form)不会选择当前表格，而是 all 表格，就像jQuery中的$("form")一样！)，或者您实际上什么也不要选择(当所需的HTML DOM元素实际上没有ID时).在HTML DOM树中调查元素ID和在HTTP流量监视器中调查请求有效载荷应该提供线索.

It can happen that you selected "too much" (e.g. @(form) doesn't select current form, but all forms, exactly like $("form") in jQuery!), or that you actually selected nothing (when the desired HTML DOM element has actually no ID). Investigating element IDs in the HTML DOM tree and the request payload in the HTTP traffic monitor the should give clues.

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

The desired elements in the HTML DOM tree must have an (autogenerated) ID. The javax.faces.partial.render request parameter in the HTTP traffic monitor must contain the right client IDs. The element's rendered attribute in the JSF component tree must evaluate true during update. Etcetera.

在您的特定示例中，<h:outputText>不会最终出现在具有任何ID的生成的HTML输出中.为它分配id应该可以解决您的更新问题.

In your particular example, the <h:outputText> won't end up in the generated HTML output with any ID. Assigning it an id should solve your problem with updating it.

因此，此示例不起作用

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

，但此示例将起作用(请注意，不必为表单分配ID):

but this example will work (note that assigning the form an ID is not necessary):

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

这篇关于如update ="@(.myClass)"中的PrimeFaces选择器如何工作?工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！