jsf – 在update =“@( myClass)”中的PrimeFaces选择器如何工作?

前端之家收集整理的这篇文章主要介绍了jsf – 在update =“@( myClass)”中的PrimeFaces选择器如何工作?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我不明白 @L_502_0@( 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如何找到正确的组件。

但是如果你使用的是表面选择器,则使用客户端jQuery选择器。 JSF如何知道必须更新哪个组件?有时我有PFS的问题。它似乎并不总是对我起作用。如果你使用PFS,你应该记住什么吗?

解决方法

你可能已经知道PrimeFaces在封面下使用jQuery。 PrimeFaces选择器基于jQuery。您在@(…)中指定的任何内容将用作当前HTML DOM树上的jQuery选择器。对于任何找到的HTML元素(具有ID),此ID最终将在更新中使用。

基本上,对于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>不是强制性的。

Sometimes I have a problems with PFS. Is there something what you are should keep in mind if you are using PFS ?

它可能发生,你选择“太多”(例如@(窗体)不选择当前窗体,但所有的形式,就像$(“form”)在jQuery!),或者你实际上什么也没有选择HTML DOM元素实际上没有ID)。调查HTML DOM树中的元素ID和HTTP流量监视器中的请求有效内容应该给出线索。

HTML DOM树中所需的元素必须具有(自动生成的)ID。 HTTP流量监视器中的javax.faces.partial.render请求参数必须包含正确的客户端ID。 JSF组件树中元素的呈现属性必须在更新期间评估为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>

猜你在找的jQuery相关文章