我在TYPO3 6.2中使用动态内容元素(dce)来构建Twitter Bootstrap手风琴元素。
为此,我制作了一个手风琴DCE,其中包含一个存储所有手风琴项目的section元素。
现在Bootstrap要求我有一种方法可以从每个手风琴项目中引用整个手风琴实例。 (这是必需的,因为在同一页面上可能有多个手风琴。)
我找到了一种使用{contentObject.uid}的方法。这给了我DCE的TYPO3内容元素uid,它是唯一的。在每页中有一个从1开始的计数器会更好。我想,DCE拥有类似的东西,但我现在已经知道如何访问它了。
真正的问题是我还需要为整个手风琴中的每个手风琴项目提供唯一的ID。在DCE中应该有一些section元素uid,但是我现在已经知道它是如何命名的,以及我如何从流体模板中访问它。
这是我目前的DCE流体模板:
{namespace dce=Tx_Dce_ViewHelpers}
<f:layout name="Default" />
<f:section name="main">
<div class="panel-group" id="accordion_{contentObject.uid}">
<f:for each="{field.accelement}" as="accordion-element">
<div class="panel panel-primary">
<button type="button" class="btn btn-primary btn-block" data-toggle="collapse" data-parent="#accordion_{contentObject.uid}" data-target="#collapse_{accordion-element.uid}">{accordion-element.elheadline}</button>
<div id="collapse_{accordion-element.uid}" class="panel-collapse collapse">
<div class="panel-body">
{accordion-element.elcontent}
</div>
</div>
</div>
</f:for>
</div>
</f:section>
无效的元素是{accordion-element.uid}。我尝试了从{accordion-element.id}到{field.accelement.id}和{field.accelement.uid}的所有内容 - 但没有运气。
答案 0 :(得分:1)
嗯 - 像往常一样:
休息之后,我立即看到了两小时前找不到的解决方案。
将 key 属性添加到for-each-loop中会产生魔力。
{namespace dce=Tx_Dce_ViewHelpers}
<f:layout name="Default" />
<f:section name="main">
<div class="panel-group" id="accordion_{contentObject.uid}">
<f:for each="{field.accelement}" key="n" as="accordion-element">
<div class="panel panel-primary">
<button type="button" class="btn btn-primary btn-block" data-toggle="collapse" data-parent="#accordion_{contentObject.uid}" data-target="#collapse_{contentObject.uid}_{n}">{accordion-element.elheadline}</button>
<div id="collapse_{contentObject.uid}_{n}" class="panel-collapse collapse">
<div class="panel-body">
{accordion-element.elcontent}
</div>
</div>
</div>
</f:for>
</div>
</f:section>
为确保所有手风琴项目都是唯一的,即使多个手风琴放在同一页面上,我们也必须使用 contentObject.uid 和当前循环键:collapse_{contentObject.uid}_{n}