Как работают селекторы PrimeFaces, как в update="@(. MyClass)"?

Question

Я не понимаю, как работают селекторы PrimeFaces ( PFS).

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

Я могу использовать это. И я думаю, что это фантастический инструмент, хотя он не всегда работает для меня. .myClass клиентский jQuery-селектор Как JSF на стороне сервера узнает, что обновлять?

Я могу понять, как работают обычные селекторы идентификаторов JSF.

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

textId ссылается на идентификатор компонента в дереве компонентов, как определено в файле XHTML на стороне сервера. Так что я могу понять, как JSF находит нужный компонент.

Но если вы используете селекторы простых лиц, то на стороне клиента используются селекторы jQuery. Как JSF узнает, какой компонент должен быть обновлен? Иногда у меня проблемы с PFS. Кажется, это не всегда работает для меня. Есть ли что-то, что вы должны иметь в виду, если вы используете PFS?

Answer 1

Вы, наверное, уже знаете, что PrimeFaces использует jQuery под прикрытием. Селекторы PrimeFaces основаны на jQuery. Все, что вы указываете в @(...) будет использоваться как селектор jQuery в текущем дереве HTML DOM. Для любого найденного HTML-элемента, который имеет идентификатор, именно этот идентификатор в конечном итоге будет использоваться в update,

В основном, для 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" />

Обратите внимание, что это также работает для автоматически сгенерированных идентификаторов. То есть <h:form id> не является обязательным

---

Иногда у меня проблемы с PFS. Есть ли что-то, что вы должны иметь в виду, если вы используете PFS?

Может случиться, что вы выбрали "слишком много" (например, @(form) не выбирает текущую форму, но все формы, так же, как $("form") в jQuery!) или что вы на самом деле ничего не выбрали (когда у нужного HTML-элемента DOM фактически нет идентификатора). Исследование идентификаторов элементов в дереве HTML DOM и полезной нагрузки запросов в мониторе HTTP-трафика должно дать подсказки.

Желаемые элементы в дереве HTML DOM должны иметь (автоматически сгенерированный) идентификатор. javax.faces.partial.render Параметр запроса в мониторе трафика HTTP должен содержать правильные идентификаторы клиента. Элементы rendered атрибут в дереве компонентов JSF должен оценивать true во время обновления. Etcetera.

В вашем конкретном примере <h:outputText> не попадет в сгенерированный HTML-вывод с каким-либо идентификатором. Назначение этого id должен решить вашу проблему с обновлением.

Таким образом, этот пример не будет работать

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

но этот пример будет работать (обратите внимание, что присвоение идентификатору формы не обязательно):

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