Typo3 Flux FCE 面板丢失内容

Posted 2023-02-22

【中文标题】Typo3 Flux FCE 面板丢失内容

【英文标题】：Typo3 Flux FCE panel losing content

【发布时间】：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="accordionrecord.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="headingrecord.uid-iteration.index">
            <a data-toggle="collapse" data-accordion="true"             
                    href="#collapserecord.uid-iteration.index" 
                    aria-expanded="true" 
                    aria-controls="collapserecord.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="collapserecord.uid-iteration.index" 
             class="collapse 
                f:if(condition: 'panel.panel.active', then: 'show')" 
             role="tabpanel" 
             aria-labelledby="headingrecord.uid-iteration.index" 
             data-parent="#accordionrecord.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 输出 - 显示正确渲染的面板标题，但其中没有内容

【参考方案1】：

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

【参考方案2】：

你可以这样做：

<f:for each="panels" as="panel" iteration="iterator">
    <flux:grid.row>
        <flux:grid.column name="columniterator.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 建立关系比与位置建立关系更好......