web-dev-qa-db-fra.com

Comment fonctionnent les sélecteurs PrimeFaces comme dans update = "@ (. MyClass)"?

Je ne comprends pas comment sélecteurs PrimeFaces ( PFS ) fonctionnent.

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

Je peux l'utiliser. Et je pense que c'est un outil fantastique bien qu'il ne fonctionne pas toujours pour moi. Le .myClass est le sélecteur jQuery côté client. Comment JSF côté serveur sait-il quoi mettre à jour?

Je peux comprendre comment fonctionne normal sélecteurs d'ID JSF .

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

textId fait référence à un ID de composant dans l'arborescence des composants tel que défini dans le fichier XHTML côté serveur. Je peux donc comprendre comment JSF trouve le bon composant.

Mais si vous utilisez des sélecteurs primefaces, les sélecteurs jQuery côté client sont utilisés. Comment JSF sait-il quel composant doit être mis à jour? Parfois, j'ai des problèmes avec PFS. Cela ne semble pas toujours fonctionner pour moi. Y a-t-il quelque chose que vous devez garder à l'esprit si vous utilisez PFS?

jsfjsf-2primefacesjquery-selectors
35
John N

Vous savez probablement déjà que PrimeFaces utilise jQuery sous les couvertures. Les sélecteurs PrimeFaces sont basés sur jQuery. Tout ce que vous spécifiez dans @(...) sera utilisé comme sélecteur jQuery sur l'arborescence DOM HTML actuelle. Pour tout élément HTML trouvé, qui a un ID, exactement cet ID sera finalement utilisé dans le update.

Fondamentalement, pour une update="@(.myclass)", PrimeFaces fera sous les couvertures à peu près ceci:

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.

Donc, par exemple.

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

cette mise à jour du bouton de commande

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

finira avec exactement le même effet que

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

Notez que cela fonctionne également pour les ID générés automatiquement. C'est à dire. le <h:form id> n'est pas obligatoire.

Parfois, j'ai des problèmes avec PFS. Y a-t-il quelque chose que vous devriez garder à l'esprit si vous utilisez PFS?

Il peut arriver que vous sélectionniez "trop" (par exemple @(form) ne sélectionne pas le formulaire actuel, mais tous les formulaires , exactement comme $("form") dans jQuery!), ou que vous n'avez en fait rien sélectionné (lorsque l'élément HTML DOM souhaité n'a en fait pas d'ID). L'étude des ID d'élément dans l'arborescence DOM HTML et de la charge utile de la demande dans le moniteur de trafic HTTP devrait donner des indices.

Les éléments souhaités dans l'arborescence DOM HTML must ont un ID (généré automatiquement). Le paramètre de demande javax.faces.partial.render Dans le moniteur de trafic HTTP doit contient les bons ID client. L'attribut rendered de l'élément dans l'arborescence des composants JSF must évalue true lors de la mise à jour. Etc.

Dans votre exemple particulier, le <h:outputText> Ne se retrouvera pas dans la sortie HTML générée avec un ID. L'attribution d'un id devrait résoudre votre problème de mise à jour.

Donc, cet exemple ne fonctionnera pas

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

mais cet exemple fonctionnera (notez qu'il n'est pas nécessaire d'attribuer un ID au formulaire):

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