0

我将 Primefaces 与 Mojarra 一起使用，并注意到每个动态 p:tab 下的树都有相同的 id

<p:tabView id="customerData" value="#{documentTabView.documentTabs}" var="tab" dynamic="true">  
   <p:tab title="#{tab.title}" closable="#{tab.closable}" >
      <p:panel>
         <h:outputText value="test_#{tab.title}"/>
      </p:panel>
  </p:tab>
</p:tabView>

生成的 HTML 如下：

<div id="customerData" class="ui-tabs ui-widget ui-widget-content ui-corner-all ui-hidden-container ui-tabs-top">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
      <li class="ui-state-default ui-tabs-selected ui-state-active ui-corner-top" role="tab" aria-expanded="true"><a href="#customerData:0:j_idt21">all documents</a></li>
      <li class="ui-state-default ui-corner-top" role="tab" aria-expanded="false"><a href="#customerData:1:j_idt21">other documents</a><span class="ui-icon ui-icon-close"></span></li>
   </ul>
   <div class="ui-tabs-panels">
      <div id="customerData:0:j_idt21" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false">
         <div id="customerData:0:j_idt46" class="ui-panel ui-widget ui-widget-content ui-corner-all">
            <div id="customerData:0:j_idt46_content" class="ui-panel-content ui-widget-content">test_all documents</div>
         </div>
         <script id="customerData:0:j_idt46_s" type="text/javascript">PrimeFaces.cw('Panel','widget_customerData_0_j_idt46',{id:'customerData:0:j_idt46'});</script>
      </div>
      <div id="customerData:1:j_idt21" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-helper-hidden" role="tabpanel" aria-hidden="true"></div>
   </div>
   <input type="hidden" id="customerData_activeIndex" name="customerData_activeIndex" value="0" autocomplete="off" />
</div>

您能否解释一下为什么相同的 id（此处j_idt21）被使用了两次。我知道它以选项卡索引为前缀，但我想知道它是否存在强制拥有另一个（和不同）ID 的解决方案。

4

1 回答 1

3

因为只有一个 <p:tab>组件会根据<p:tabView value>.

如果您对自动生成的 ID 感到困扰，只需提供<p:tab>一个固定 ID。

<p:tab id="tab" ...>

如果您担心在例如 JavaScript 中通过固定 ID 来区分选项卡，那么只需将其内容放在基于当前迭代项目生成的纯 HTML<div>中。id例如

<p:tab ...>
    <div id="#{tab.name}">
        ...
    </div>
</p:tab>
于 2013-08-16T11:30:29.887 回答