在 update="@(.myClass)" 中如何使用 PrimeFaces Selectors工作? [英] How do PrimeFaces Selectors as in update="@(.myClass)" work?

问题描述

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

I don't understand how PrimeFaces selectors (PFS) work.

<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选择器工作.

I can understand how normal JSF ID selectors work.

<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. 不是强制性的.

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

有时我会遇到 PFS 问题.如果您使用 PFS，有什么需要牢记的吗?

您可能选择了太多"(例如 @(form) 没有选择当前表单，而是 all 表单，就像 $(jQuery 中的表单")！)，或者您实际上没有选择任何内容(当所需的 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.

在您的特定示例中， 不会以任何 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.

所以，这个例子不起作用

So, this example won't work

<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 Selectors工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！