【问题标题】：Is there a way to wrap X items in TYPO3 fluid?有没有办法用 TYPO3 液体包裹 X 物品？
【发布时间】：2015-11-24 15:12:21
【问题描述】：

使用扩展 DCE 元素，我创建了一个流体模板，为创建的每个项目生成一个 li 项目。现在我想让每个第一个到第二个项目都有一个包装器。所以：

<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>

变成：

<ul>
    <li>item 1</li>
    <li>item 2</li>
</ul>
<ul>
    <li>item 3</li>
    <li>item 4</li>
</ul>
<ul>
    <li>item 5</li>
</ul>

在流体模板中这可能吗？也许与 Typoscript 结合使用？

【问题讨论】：

您可以将 for 和 if viewhelper 与 (%) 运算符一起使用。

标签： typo3 fluid

【解决方案1】：

解决方案

这就是我最终使用{cycle} 每 2 个项目迭代一次槽，然后关闭和打开标签的结果。以及确保最后一项不以开始标签结尾：

<ul>
    <f:for each="{field.item}" as="item" iteration="iterator">

        <f:if condition="{iterator.cycle} % 2">
            <f:then>
                <li>item {iterator.cycle}</li>
            </f:then>
            <f:else>
                <li>item {iterator.cycle}</li>
                <f:if condition="{iterator.isLast} != 1">
                    <f:then>
                        </ul><ul>
                    </f:then>
                </f:if>
            </f:else>
        </f:if>

    </f:for>
</ul>

注意

我知道借助 VHS 的强大功能v:iterator.chunk 可能会用更少的代码解决这个问题，但我无法让它按我想要的方式工作。 ~~如果有人愿意提供一个工作示例来比较这两个选项，我将不胜感激。~~

带录像机

更新：21.12.2017

于是重温了chunk选项，同样的代码是用下面的sn-p使用VHS iterator.chunk实现的：

<f:for each="{field.item -> v:iterator.chunk(count: 2)}" as="col" iteration="cycle">
    <ul>
        <f:for each="{col}" as="item">
            <li>
                test
            </li>
        </f:for>
    </ul>
</f:for>

也许这对那里的人有帮助！

【讨论】：

【解决方案2】：

如果您使用的是 VHS 视图助手集合扩展，那么您也可以使用 Iterator\Chunked 视图助手：

<v:iterator.chunk count="4" subject="{menu}" as="entries">
     <f:for each="{entries}" as="row">
          <f:for each="{row}" as="page">
          [...]
          </f:for>
     </f:for>
</v:iterator>

【讨论】：

【解决方案3】：

这对于常规 Fluid 是可能的，使用 for 视图助手的迭代器。

<f:for each="{items}" as="item" iteration="itemIterator">
    <f:if condition="{itemIterator.isOdd}">
        <ul>
    </f:if>
    <li>{item.name}</li>
    <f:if condition="{itemIterator.isOdd}">
        <f:then>
            <f:if condition="{itemIterator.isLast}">
                </ul>
            </f:if>
        </f:then>
        <f:else>
            </ul>
        </f:else>
    </f:if>
</f:for>

棘手的部分是关闭</ul>，上面覆盖着流体。

【讨论】：

如果您想每组正好有两个项目，这是一个很好的解决方案:-)

【解决方案4】：

当然，除了计数器/迭代器之外，您还需要 for 视图助手。您可以使用if viewhelper 来检查您的状况。 API 有一些示例：http://api.typo3.org/typo3cms/current/html/class_t_y_p_o3_1_1_c_m_s_1_1_fluid_1_1_view_helpers_1_1_for_view_helper.html#details

https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/For.html

【讨论】：

【解决方案5】：

我还有一个解决方案，至于我 - 更原生

<f:for each="{items}" as="item" iteration="itemIterator">
    <f:cycle values="{0:'left', 1:'right', 3:'center'}" as="order">
            <f:switch expression="{order}">
                <f:case value="left">
                       <div class="left">Conetnt</div>
                </f:case>
                <f:case value="right">
                       <div class="right">Conetnt</div>
                </f:case>
                <f:case value="center">
                       <div class="center">Conetnt</div>
                </f:case> 
            </f:switch>  
    </f:cycle> 
</f:for>

【讨论】：