用 JSF 标记替换 c:forEach 的最佳方法答案

【问题标题】：Best way to replace c:forEach with JSF tag用 JSF 标记替换 c:forEach 的最佳方法
【发布时间】：2014-01-22 15:34:59
【问题描述】：

我们正在从 jsf 1.2 升级到 jsf 2。我们使用的是 apache myfaces 2.1 和 rich faces 4.3。

下面是xhtml代码：

 <h:form>
<h:panelGroup id="myMenu_type">

    <div id="myMenu">
         <ul>
        <c:forEach items="#{bean.data}" var="val">
                 <li>
                    <h:commandLink value="#{val.label}" action="#{val.performAction}"/>                                                                                                                    
                 </li>
        </c:forEach>
         </ul>   
     </div>
 </h:panelGroup>
</h:form>

我收到上述 xhtml 代码的重复 id 错误。生成的锚链接标签<a> 获取上述代码的重复ID。

我的问题是，我想摆脱 c:forEach，因为我怀疑它会像我一样给出这个重复的 id 错误混合 JSTL 和 JSF。

替换上述构造的最佳 JSF 方法是什么？我正在尝试使用rich:dataTable。有没有更好的选择？请指教。奇怪的是，使用相同的代码，JSF 1.2 没有观察到上述问题。

编辑 1：

我尝试过使用<rich:list> 和<a4j:repeat> 下面是xhtml代码

    <div id="myMenu">
                     <rich:list value="#{bean.data}" var="val">
                        #{val}
                     </rich:list>
         </div>

奇怪的是，当我打印 #{val} 时，它给了我 javax.faces.component.UIViewRoot@28d0bbac 的值，而 val 是正常的自定义对象。由于上述问题，我无法在 val 上调用任何方法，它给出了在 javax.faces.component.UIViewRoot 类型上找不到 Property 'xx' 错误。使用<c:forEach>时不会出现上述错误。

编辑 2：

我附上了为上述 xhtml 代码生成的 html，它可以清楚地了解重复 id 错误的来源。

 <tr><td>

  <span id="form:myMenu_type">
    <a href="#" onclick="return myfaces.oam.submitForm(id1);">One</a>
    <a href="#" onclick="return myfaces.oam.submitForm(id2);">Two</a>
    <a href="#" onclick="return myfaces.oam.submitForm(id3);">Three</a>
    <a href="#" onclick="return myfaces.oam.submitForm(id4);">Four</a>
    <a href="#" onclick="return myfaces.oam.submitForm(id5);">Five</a>
    <a href="#" onclick="return myfaces.oam.submitForm(id6);">Six</a>
                <div id="myMenu">
                            <ul>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id1);">One</a>
                                    </li>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id2);">Two</a>
                                    </li>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id3);">Three</a>
                                    </li>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id4);">Four</a>
                                    </li>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id5);">Five</a>
                                    </li>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id6);">Six</a>
                                    </li>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id7);">Seven</a>
                                    </li>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id8);">Eight</a>
                                    </li>                               
                           </ul>
                    </div>
  </span>       
</td></tr>

所以如上面的代码所示，在 form:myMenu_type 正下方生成的锚链接标签<a> 是真正的问题。它的 id 与在<li> 中生成的完全相同——这是正确的，因为我明确地使用了<li>。为什么生成锚标签是真正的问题。即使我在 <c:forEach> 内动态分配 ID，同样会分配给上面的 <a> 链接，给出相同的重复 ID 错误。我使用虚拟 ID 来解释这个问题。实际 id 是 myFaces 生成的动态 id

【问题讨论】：

它看起来更像是 MyFaces 中的一个错误。在 Mojarra 实现中存在一些类似的问题，可能与 MyFaces 的情况类似。尝试不同（最新）版本的 MyFaces。如果可能，请尝试 Mojarra 实现，以检查问题是否是由 JSF impl 中的特定内容引起的。
@Andrey：感谢cmets。在上面提到的两个问题中，javax.faces.component.UIViewRoot@28d0bbac打印和错误的html标记，你说的是哪个问题？
关于错误的标记，即 h:commandLink 生成元素两次。
@Andrey：我用 a4j:commandLink 替换了 h:commandLink，现在没有观察到重复的 id 问题。感谢您的帮助

标签： jsf-2 richfaces jstl

【解决方案1】：

使用 ui:repeat 的 JSF

示例：

<ui:repeat value="#{productMB.products}" var="product">
<table class="cart">
  <tr>
    <td class="image">
      <div id="image_container">
        <img title="#{product.type} #{product.mark} #{product.family} #{product.subfamily} #{product.model} #{product.partNumber}" src="#{product.imageURL}"/>
      </div>        
    </td>
  </tr>
</table>
</ui:repeat>

【讨论】：