webentwicklung-frage-antwort-db.com.de

Wie funktionieren PrimeFaces-Selektoren wie in update = "@ (. MyClass)"?

Ich verstehe nicht, wie PrimeFaces-Selektoren ( PFS ) funktionieren.

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

Ich kann es gebrauchen Und ich denke, es ist ein fantastisches Tool, obwohl es für mich nicht immer funktioniert. Das .myClass ist der clientseitige jQuery-Selektor. Woher weiß JSF auf der Serverseite, was aktualisiert werden muss?

Ich kann verstehen, wie normal JSF-ID-Selektoren funktionieren.

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

Das textId verweist auf eine ID der Komponente im Komponentenbaum, wie in der XHTML-Datei auf der Serverseite definiert. So kann ich verstehen, wie JSF die richtige Komponente findet.

Wenn Sie jedoch Primefaces-Selektoren verwenden, werden die clientseitigen jQuery-Selektoren verwendet. Woher weiß JSF, welche Komponente aktualisiert werden muss? Manchmal habe ich Probleme mit PFS. Es scheint nicht immer für mich zu funktionieren. Gibt es etwas, was Sie beachten sollten, wenn Sie PFS verwenden?

jsfjsf-2primefacesjquery-selectors
35
John N

Sie wissen wahrscheinlich bereits, dass PrimeFaces jQuery unter der Decke verwendet. PrimeFaces Selectors basieren auf jQuery. Alles, was Sie in @(...) angeben, wird im aktuellen HTML-DOM-Baum als jQuery-Selektor verwendet. Für jedes gefundene HTML-Element, das eine ID hat, wird letztendlich genau diese ID im update verwendet.

Grundsätzlich wird PrimeFaces für eine update="@(.myclass)" unter dem Deckmantel ungefähr so ​​verfahren:

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.

Im Fall von z.B.

<h:form id="formId">
    <h:outputText id="output1" styleClass="myclass" ... />
    <h:outputText styleClass="myclass" ... />
    <h:outputText id="output3" styleClass="myclass" ... />
</h:form>

diese Befehlsschaltfläche aktualisieren

<p:commandButton ... update="@(.myclass)" />

endet mit genau dem gleichen Effekt wie

<p:commandButton ... update=":formId:output1 :formId:output3" />

Beachten Sie, dass dies auch für automatisch generierte IDs funktioniert. Das heißt das <h:form id> ist nicht zwingend erforderlich.

Manchmal habe ich Probleme mit PFS. Gibt es etwas, was Sie beachten sollten, wenn Sie PFS verwenden?

Es kann vorkommen, dass Sie "zu viel" ausgewählt haben (z. B. @(form) wählt nicht das aktuelle Formular aus, sondern alle Formulare, genau wie $("form") in jQuery!) oder dass Sie tatsächlich nichts ausgewählt haben (wenn das gewünschte HTML-DOM-Element tatsächlich keine ID hat). Die Untersuchung der Element-IDs im HTML-DOM-Baum und der Anforderungsnutzdaten im HTTP-Verkehrsmonitor sollte Hinweise geben.

Die gewünschten Elemente im HTML-DOM-Baum müssen haben eine (automatisch generierte) ID. Der Anforderungsparameter javax.faces.partial.render Im HTTP-Verkehrsmonitor muss enthält die richtigen Client-IDs. Das Attribut rendered des Elements im JSF-Komponentenbaum muss beim Aktualisieren true auswerten. Und so weiter.

In Ihrem speziellen Beispiel wird <h:outputText> Nicht mit einer ID in der generierten HTML-Ausgabe angezeigt. Das Zuweisen eines id sollte Ihr Problem beim Aktualisieren lösen.

Dieses Beispiel wird also nicht funktionieren

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

aber dieses Beispiel wird funktionieren (beachten Sie, dass das Zuweisen des Formulars eine ID nicht erforderlich ist):

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