Typo3 Flux FCE 面板丢失内容答案

【问题标题】：Typo3 Flux FCE panel losing contentTypo3 Flux FCE 面板丢失内容
【发布时间】：2019-02-22 12:49:30
【问题描述】：

我正在从使用 FluidContent 创建自定义内容记录转移到 Fluid，因为 FluidContent 已被贬值。我正在从头开始创建新的内容记录，而不需要更新旧的。我的简单内容记录工作正常，但我在使用面板制作手风琴块时遇到了真正的麻烦。

场景

我以 BE 形式创建新面板 - 工作正常
BE 预览仅显示创建的第一个面板，但重复次数与表单中创建的面板相同。因此，如果我将新的内容记录放入面板 1，它将出现在预览中的所有面板中。
FE 输出正确显示面板标题，但没有内容。

我想知道它是否与网格设置中的迭代有关？面板显然创建得很好，可以在 FE 中渲染。它是循环遍历网格中的面板的过程是错误的，然后将它们附加到输出。

任何想法或建议都将非常感激。

非常感谢，大卫

设置：- Typo3-8.19 Flux-9.0.1 Fluidpages-4.2.0 VHS-5.0.1

FCE 模板

<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
  xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
  xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
  xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">

<f:layout name="Content"/>

<f:section name="Configuration">
    <flux:form id="bootAccordion" label="Boostrap Accordion" >
       <flux:form.option name="icon" 
        value="EXT:optionslayout/Resources/Public/Icons/Content/Example.gif" 
        />
       <flux:form.sheet name="panels" label="Pannels">
         <flux:form.section name="panels">
             <flux:form.object name="panel">
                 <flux:field.input name="title" label="Panel title"/>
                 <flux:field.checkbox name="active" label="Start expanded"/>
             </flux:form.object>
          </flux:form.section>
       </flux:form.sheet>
    </flux:form>
    <flux:grid>
        <f:for each="{panels}" as="panel" iteration="iteration">
            <flux:grid.row>
                <flux:grid.column name="column.{iteration.index}"
                                  colPos="0"
                                  label="{f:if(condition: panel.panel.title,             
                                        then: panel.panel.title, 
                                        else: 'Panel {iteration.cycle}')}">
                </flux:grid.column>
           </flux:grid.row>
        </f:for>
    </flux:grid>
</f:section>


<f:section name="Preview">
</f:section>


<f:section name="Main">
  <div id="accordion{record.uid}" class="accordion" 
        role="tablist" aria-multiselectable="true">

    <f:for each="{panels}" as="panel" iteration="iteration">
      <div class="card">
        <div class="card-header" role="tab" 
          id="heading{record.uid}-{iteration.index}">
            <a data-toggle="collapse" data-accordion="true"             
                    href="#collapse{record.uid}-{iteration.index}" 
                    aria-expanded="true" 
                    aria-controls="collapse{record.uid}-{iteration.index}">
              <h5 class="mb-0">
                {panel.panel.title} 
                <i class="fa fa-angle-down rotate-icon float-right"></i>
              </h5>
            </a>
        </div>
        <div id="collapse{record.uid}-{iteration.index}" 
             class="collapse 
                {f:if(condition: '{panel.panel.active}', then: 'show')}" 
             role="tabpanel" 
             aria-labelledby="heading{record.uid}-{iteration.index}" 
             data-parent="#accordion{record.uid}">
          <div class="card-body">
            <flux:content.render area="column.{iteration.index}" />
          </div>
        </div>
      </div>
    </f:for>

  </div>
</f:section>

</div>

BE 表单视图 - 显示 2 个面板已成功创建

BE 预览 - 仅显示第一个面板，重复错误

FE 输出 - 显示正确渲染的面板标题，但其中没有内容

【问题讨论】：

标签： typo3 flux fluid typo3-8.x

【解决方案1】：

flux 需要 colpos 值，而 fluidcontent 不需要。不知道怎么动态设置colpos值。

【讨论】：

【解决方案2】：

你可以这样做：

<f:for each="{panels}" as="panel" iteration="iterator">
    <flux:grid.row>
        <flux:grid.column name="column{iterator.cycle}" colPos="{iterator.cycle}"  label="{panel.panel.title} Accordeon n°{iterator.cycle}">
        </flux:grid.column>
    </flux:grid.row>
</f:for>

但对于<flux:grid.column name= 和<flux:content.render area=，最好使用{panel.panel.id} 而不是{iterator.cycle} 或{iterator.index}，因为如果不是这样，如果用户移动手风琴，它就会丢失里面的内容。

与唯一 id 建立关系比与位置建立关系更好......

【讨论】：