Question

我已经从使用FluidContent创建自定义内容记录转移到Flux，因为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 Form视图-显示成功创建的2个面板

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

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

Answer 1

流量需要colpos值，而流体含量则不需要。我不知道如何动态设置colpos值。

Answer 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>

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

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

Typo3 Flux FCE面板丢失内容

2 个答案: