附加包装器 div 有条件地使用 ice:panelSeries 中的索引值

Question

我有这个 UI 结构：

<ice:panelSeries value="#{bean.list}" var="item" varStatus="vs">
    <div class="row-fluid">
        <div class="span6"></div>
    </div>
</ice:panelSeries>

我想使用模块条件 #{vs.index % 2 == 0} 创建 div.row-fluid，以便 div.row-fluid 附加在两个 span6 div 之后，以创建动态网格视图。

我已经尝试使用 rendered="#{vs.index % 2 == 0}" 用 ice:panelGroup 包裹内部内容，但这会在条件变为真时隐藏该行。

另外，我试过用 c:if 标签包装 div.row-fluid，就像我们通常在其他一些语言中动态创建 html 元素一样：

<c:if test="#{vs.index % 2 == 0}"><div class="row-fluid"><c:if>
    <div class="span4"></div>
<c:if test="#{vs.index % 2 == 0}"></div><c:if>

这会导致页面崩溃，提示 <div> 未正确关闭。主要问题是我必须单独放置打开和关闭 div.

有没有办法在 JSF 中使用 icefaces 组件实现这个？？？

Answer 1

根据您的实际成就，您有两个选择：

如果您想静态地（在服务器端）控制内容的显示方式，只需将您的 bean 放在二维数组中而不是列表中，然后在 UI 中使用两个嵌套循环宣言
如果行没有任何业务意义，而只是为了最好地使用水平监视器 space，那么使用一些网格框架专门在客户端工作，可能在反应灵敏的方式。例如 Twitter Bootstrap 一个 can write:

<div class="container">
    <div class="row">
      <div class="col-md-6 O"></div>
      <div class="col-md-6 O"></div>
      <div class="col-md-6 O"></div>
      <div class="col-md-6 O"></div>
    </div>
</div>

不在标记中创建多行

Answer 2

This causes page to crash saying <div> is not properly closed

您可以通过 <h:outputText escape="false"> 传递转义的 XML 来欺骗它。

<h:outputText value="&lt;div class=&quot;row-fluid&quot;&gt;" escape="false" rendered="#{vs.index mod 2 eq 0}" />
    <div class="span4"></div>
<h:outputText value="&lt;/div&gt;" escape="false" rendered="#{vs.index mod 2 eq 0}" />

附加包装器 div 有条件地使用 ice:panelSeries 中的索引值

Appending wrapper div conditionally using index value in ice:panelSeries

jsf

icefaces