为什么我得到 p:tab 孩子的相同 ID 后缀？答案

【问题标题】：Why do I get the same ID suffix for p:tab children?为什么我得到 p:tab 孩子的相同 ID 后缀？
【发布时间】：2013-08-16 11:01:18
【问题描述】：

我在 Mojarra 中使用 Primefaces，并注意到每个动态 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 的解决方案。

【问题讨论】：

对于所有对问题（或答案）投反对票的人，请提供理由。
@Xtreme：这可能是因为原始问题中的 HTML 被 &lt; 完全转义了，这使得修复糟糕的格式非常困难。这可能会让一个有帮助意图的编辑完全发疯。这个问题本身就可以回答。

标签： jsf primefaces

【解决方案1】：

因为只有一个 <p:tab> 组件根据<p:tabView value> 的当前迭代轮次多次生成相同的HTML。

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

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

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

<p:tab ...>
    <div id="#{tab.name}">
        ...
    </div>
</p:tab>

【讨论】：

感谢您的回答，但根据我的测试，不接受使用 EL 定义 id，因为它会引发空指针异常。我从不同的读数中了解到，“id”标签是在评估 EL 之前初始化的。因此，我有一种感觉，在我描述的情况下，您不能为每个选项卡设置不同的 id。
重读您的回复，我注意到您指的是“纯 HTML”标签，也许这是一个主要区别，在这种情况下，它可能像您所写的那样工作。我会尝试。谢谢。
id（和binding）属性在视图构建期间进行评估，但<p:tabView> 值在视图渲染期间运行。另见stackoverflow.com/questions/3342984/…