父组件渲染属性为假时渲染子组件？

Question

我想创建一个这样的网格：

元素1 元素2 元素3

元素4元素5元素6

我有以下代码：

<ui:repeat value=#{beans.myElementList} var="element" varStatus="i">
   <b:row rendered=#{i.index%3==0}>
      <b:column medium-screen="4">
         #{element.display}
      </b:column>
   </b:row>
</ui:repeat>

我的代码结果：

元素1

元素4

如何解决这个问题？

Answer 1

<b:panelGrid> 救援：

<ui:repeat value=#{beans.myElementList} var="element">
   <b:panelGrid columns="3" size="md">
     #{element.display}
   </b:panelGrid>
</ui:repeat>

<b:panelGrid> 的灵感来自于标准<h:panelGrid>，它呈现一个 HTML 表格。同样，<b:panelGrid> 呈现一个由 Bootstrap 行和列组成的表。只需将您想要显示的所有内容放入面板网格中。 BootsFaces 自动检测何时呈现新行。

我最初想到的用例是一个表单。通常，这样的表单是相同行的重复：标签、输入字段、错误消息。 <b:panelGrid> 允许您轻松创建这样的表格形式。

另见documentation of <b:panelGrid>。

在 BootsFaces 1.2.0 发布之前的补充： 查看文档，我对所看到的内容不满意。所以我已经更正并更新了它。在 BootsFaces 1.2.0 发布之前，另请参阅 documentation of the developer showcase。

Answer 2

试试下面的代码。
第一个 ui:repeat 为每 3 个元素渲染 <row>，
第二个渲染元素（在 <column> 内），每组 3 个元素。

<ui:repeat value="#{beans.myElementList}" step="3" varStatus="i" >

    <b:row>
        <ui:repeat value="#{beans.myElementList}" var="element"
                   step="1" offset="#{i.index}" 
                   size="#{i.index + 3 le beans.myElementList.size() ? i.index + 3 : beans.myElementList.size() }"
                   varStatus="j" >
             <b:column medium-screen="4">
                 #{element.display}
             </b:column>        
        </ui:repeat>
    </b:row>

</ui:repeat>