jsf-2 - 组件在ui :repeat中具有相同的ID

Question

不幸的是，如果您尝试动态创建选项卡，则primefaces Accordion 面板在2.2.1版中不能很好地工作。这是我的情况，如果用户单击添加图标，我需要创建 Accordion ，如果单击x图标，则需要删除 Accordion 。没问题，我已经创建了自己的复合组件，就像您在这里看到的那样:

<c:interface>
    <c:attribute name="titulo" default="" required="false" />
    <c:attribute name="renderizar" default="true" required="false" />
    <c:attribute name="width" required="false" default="300"/>
    <c:facet name="extra" required="false" />
</c:interface>

<c:implementation>
    <h:outputStylesheet library="css" name="hrgiAccordion.css" target="head" />
    <h:outputStylesheet library="css" name="clearfix.css" target="head" />
    <h:outputScript library="js" name="hrgiAccordion.js" target="head" />
    <h:panelGroup layout="block" rendered="#{cc.attrs.renderizar}"
    styleClass="hrgi-accordion clearfix" style="width: #{cc.attrs.width}px;">
        <div class="hrgi-cabecalho-accordion clearfix"
            onclick="abrirAccordion(this)">
            <h:outputLabel value="#{cc.attrs.titulo}" />
            <c:renderFacet name="extra" required="false"/>
        </div>
        <h:panelGroup layout="block" class="hrgi-conteudo-accordion clearfix">
            <c:insertChildren />
        </h:panelGroup>
    </h:panelGroup>
</c:implementation>

它工作正常，但是我有一些特定的需求... Accordion 选项卡的内容是一些选择以及一个带有inputField和Spinner的动态表(由我再次创建)，您可以在此处看到用户界面:

当用户在微调器中插入值时，标签“Total das parcelas”应该更新，但是仅在对话框只有一个 Accordion 标签时才更新!查看生成的html代码，我已经看到在differents Accordion 选项卡中的微调器是相等的!可能这就是我无法更新值的原因。这是此对话框的代码:

<ui:composition template="../templates/popupSubmit.xhtml">
<ui:param name="titulo" value="#{vendaMsg['popup.forma_pagamento.titulo']}"/>
<ui:param name="popup" value="#{modeloPopupFormaPagamento}"/>
<ui:param name="controladorPopup" value="#{controladorPopupFormaPagamento}"/>
<ui:define name="cabecalho">
    <h:panelGroup id="cabecalhoValores" binding="#{cabecalhoValores}" layout="block">
        <h:outputLabel value="#{vendaMsg['popup.forma_pagamento.total_prevenda']}" />
        <h:outputLabel value="#{preVendaBean.valorLiquido}">
            <f:convertNumber currencySymbol="R$" maxFractionDigits="2"
                             minFractionDigits="2" type="currency" currencyCode="BRL"/>
        </h:outputLabel>
        <hrgi:separador/>
        <h:outputLabel value="#{vendaMsg['popup.forma_pagamento.total_parcelas']}" />
        <h:outputLabel value="#{controladorPopupFormaPagamento.calcularTotalParcelas()}">
            <f:convertNumber currencySymbol="R$" maxFractionDigits="2"
                             minFractionDigits="2" type="currency" currencyCode="BRL"/>
        </h:outputLabel>
    </h:panelGroup>
</ui:define>
<ui:define name="conteudo">
    <h:panelGroup layout="block" styleClass="clearfix hrgi-div-form">
        <h:panelGroup id="painelFormasDePagamento" binding="#{painelFormasDePagamento}" layout="block">
            <ui:repeat id="repeticao" var="formaPagamento" value="#{modeloPopupFormaPagamento.formasDePagamento}">
                <hrgi:accordion titulo="#{vendaMsg['popup.forma_pagamento.aba_acordeon.titulo']}" width="380">
                    <f:facet name="extra">
                        <p:commandLink action="#{controladorPopupFormaPagamento.removerForma(formaPagamento)}"                                           
                                       update=":#{painelFormasDePagamento.clientId}" global="false">
                            <h:graphicImage library="img" name="remover.png"/>
                        </p:commandLink>
                    </f:facet>
                    <h:panelGroup layout="block" class="clearfix">
                        <h:panelGroup id="painelSelecaoForma" layout="block">
                            <h:outputLabel value="#{vendaMsg['popup.forma_pagamento.forma_pagamento']}"/>
                            <h:selectOneMenu value="#{formaPagamento.idFormaPagamento}"                                                                 valueChangeListener="#{controladorPopupFormaPagamento.processarMudancaFormaPagamento}">
                                <f:selectItems value="#{selectItemFormasPagamento.itens}"/>
                                <f:attribute value="#{formaPagamento}" name="formaPagamento"/>
                                <f:ajax event="change" render="painelSelecaoForma painelParcelasFormaPagamento" execute="painelSelecaoForma"/>
                            </h:selectOneMenu>
                            <h:outputLabel value="#{vendaMsg['popup.forma_pagamento.plano_pagamento']}"                                       />
                            <h:selectOneMenu value="#{formaPagamento.idPlanoPagamento}"                                        valueChangeListener="#{controladorPopupFormaPagamento.processarMudancaPlanoPagamento}">
                                <f:selectItems value="#{controladorPopupFormaPagamento.recuperarCarregador(formaPagamento).itens}"/>
                                <f:attribute value="#{formaPagamento}" name="formaPagamento"/>
                                <f:ajax event="change" render="painelParcelasFormaPagamento"/>
                            </h:selectOneMenu>
                        </h:panelGroup>
                        <h:panelGroup id="painelParcelasFormaPagamento" layout="block">
                            <p:dataTable id="tabela" value="#{formaPagamento.parcelas}" var="parcela"
                                         emptyMessage="#{msgGerais['gerais.sem_dados']}"
                                         scrollable="#{formaPagamento.parcelas.size()>2}"
                                         height="76">
                                <p:column headerText="#{vendaMsg['popup.forma_pagamento.tabela.numero_parcela']}">
                                    <h:outputText value="#{formaPagamento.parcelas.indexOf(parcela)+1}"/>
                                </p:column>
                                <p:column headerText="#{vendaMsg['popup.forma_pagamento.tabela.vencimento_parcela']}">
                                    <hrgi:editableDate value="#{parcela.dataVencimento}" editable="true"/>
                                </p:column>
                                <p:column headerText="#{vendaMsg['popup.forma_pagamento.tabela.valor_parcela']}">
                                    <hrgi:spinner id="valor"
                                            dinheiro="true" fator="0.01" local="pt-BR"
                                            value="#{parcela.valor}">
                                        <f:ajax event="change" execute="@form"
                                                render=":#{cabecalhoValores.clientId}"/>
                                        <f:convertNumber currencySymbol="R$" maxFractionDigits="2"
                                                         minFractionDigits="2" type="currency" currencyCode="BRL"
                                                         for="input"/>
                                    </hrgi:spinner>
                                </p:column>
                            </p:dataTable>
                        </h:panelGroup>
                    </h:panelGroup>
                </hrgi:accordion>
            </ui:repeat>
        </h:panelGroup>
        <p:commandLink immediate="true" action="#{controladorPopupFormaPagamento.adicionarForma}"
                       update="painelFormasDePagamento" global="false">
            <h:graphicImage library="img" name="adicionar_48.png"/>
        </p:commandLink>
    </h:panelGroup>
</ui:define>
</ui:composition>

在此图中，您可以看到发生了什么，primefaces数据表中的组件ID并未附加ui:repeat索引:

我怎么解决这个问题？？？

Answer 1

这是一个Mojarra错误，当您将UIData组件嵌套在UIRepeat内时就会显现出来。我曾经将其报告为issue 1830。到目前为止，它尚未修复，并且可以在MyFaces中按预期工作。 UIRepeat在Mojarra中被破坏了很多，但是在MyFaces中可以完美地工作。

如果您希望/需要坚持使用Mojarra，因此无法用MyFaces替换它，请考虑使用一个完全有值(value)的基于UIRepeat的组件替换UIData。例如，Tomahawk's <t:dataList> 不会生成任何其他标记，并且是<ui:repeat>的良好替代品。或者，您可以使用PrimeFaces的 <p:dataList> 并使用一些CSS list-style-type: none隐藏列表项目符号。

更新:报告的问题已在Mojarra 2.1.12和2.2.0-m06中修复。因此，如果可以，请至少升级到该版本。