Zum Inhalt springen

Ausgabe von Datensätzen mit Fluid

Erstellt am 20. November 2012 · 1 Antwort · letzte Antwort am 4. Dezember 2012

Tags: Fluid, ViewHelper, Frage

karlchen ·

Hallo,

bin gerade ein bisschen am knobbeln wie man diese Konstruktion am besten in Fluid umsetzen kann.
Ich habe mit extension_builder eine neue Extension erstellt, es gibt eine List und eine Single View.

in der Listen Ansicht müsste ich nun folgendes HTML umsetzen.

<div class="ym-grid">
	<div class="ym-g33 ym-gl">1. Element</div>
	<div class="ym-g33 ym-gl">2. Element</div>
	<div class="ym-g33 ym-gr">3. Element</div>
</div>
<div class="ym-grid">
	<div class="ym-g33 ym-gl">4. Element</div>
	<div class="ym-g33 ym-gl">5. Element</div>
	...
</div>

im Moment habe ich folgendes:

<div class="ym-grid">

	<f:for each="{members}" as="member" iteration="counter">
		<f:if condition="{counter.cycle} % 3">
			<f:then>
				<div class="ym-g33 ym-gl">
			</f:then>
			<f:else>
				<div class="ym-g33 ym-gr">
			</f:else>
		</f:if>
			<f:image src="uploads/tx_members/{member.image}" width="310" alt="{member.name}"/>
			<div class="caption">
				<span class="name">{member.name}</span>
			</div>
		</div>
	</f:for>
	
</div>

Ich habe also jedes Element was nun auch korrekt ge"wrappt" wird, nun fehlt mir allerdings ein wenig der Ansatz wie ich es sauber umsetzen kann, das immer 3 Elemente noch mal extra gewrappt werden, in diesem fall < div class="ym-grid" >, das html von oben sieht jetzt gerade so aus

<div class="ym-grid">
	<div class="ym-g33 ym-gl">1. Element</div>
	<div class="ym-g33 ym-gl">2. Element</div>
	<div class="ym-g33 ym-gr">3. Element</div>
	<div class="ym-g33 ym-gl">4. Element</div>
	<div class="ym-g33 ym-gl">5. Element</div>
</div>
froemken ·

Das ist nicht getestet, aber probier mal das:

<f:for each="{members}" as="member" iteration="counter">
	<f:if condition="{counter.isFirst}">
		<div class="ym-grid">
	</f:if>
	<f:if condition="{counter.cycle} % 3">
		<f:then>
			<div class="ym-g33 ym-gl">
		</f:then>
		<f:else>
			<div class="ym-g33 ym-gr">
		</f:else>
	</f:if>
	<f:image src="uploads/tx_members/{member.image}" width="310" alt="{member.name}"/>
	<div class="caption">
		<span class="name">{member.name}</span>
	</div>
	<f:if condition="{counter.cycle} % 3">
		<f:then>
			</div>
		</f:then>
		<f:else>
			</div></div>
			<div class="ym-grid">
		</f:else>
	</f:if>
	<f:if condition="{counter.isLast}">
		</div>
	</f:if>
</f:for>