🔄 Repeater-Gruppe

Ein Template, viele Datensätze – Die Repeater-Gruppe wiederholt ein Layout automatisch für jeden Eintrag in einem Array.

Das Grundprinzip

Die Repeater-Gruppe nimmt ein Array aus den Daten und wendet das Template auf jeden Eintrag an.

Aufbau einer Repeater-Gruppe

Anordnungs-Richtungen

Feld-Mapping: Daten → Layout

Jedes Kind-Element im Template hat ein bind-Attribut, das auf ein Feld im Array-Item zeigt:

Dynamische Links mit Platzhaltern

Links können Platzhalter enthalten, die mit Werten aus dem Item ersetzt werden:

Kind-Element Typen

Typ	Beschreibung	Wichtige Properties
📝 text	Textfeld mit Datenbindung	`bind` - Datenfeld `style.fontFamily` - Schriftart `style.fontSize` - Größe (px) `style.fontWeight` - 400/500/600/700 `style.textColor` - Farbe (#hex) `style.textAlign` - left/center/right `link` - URL (optional) `linkTarget` - _blank/_self
🖼️ image	Bild mit Datenbindung	`bind` - URL-Feld `w, h` - Breite/Höhe (px) `style.objectFit` - contain/cover/fill `style.bg` - Hintergrund `style.radius` - Eckenradius (px) `link` - URL (optional) `linkTarget` - _blank/_self
⬜ rect	Hintergrund-Box	`w, h` - Breite/Höhe (px) `style.bg` - Hintergrund `style.radius` - Eckenradius (px) `style.strokeColor` - Rahmenfarbe

Spezial-Felder

Feld	Beschreibung	Beispiel
`$index`	Laufende Nummer (1-basiert)	1, 2, 3, ...
`feldname.unterfeld`	Verschachtelte Objekte	specs.display, price.value

Vollständiges Beispiel (JSON)

{
  "id": "smartphone-liste",
  "type": "group",
  "x": 50,
  "y": 200,
  "w": 800,
  "h": 300,
  
  "iterator": {
    "source": "smartphones",
    "direction": "horizontal",
    "gap": 20,
    "maxItems": 4
  },
  
  "itemSize": {
    "w": 180,
    "h": 240
  },
  
  "itemStyle": {
    "bg": "#ffffff",
    "radius": 8
  },
  
  "children": [
    {
      "type": "image",
      "bind": "image",
      "x": 0,
      "y": 0,
      "w": 180,
      "h": 140,
      "style": {
        "objectFit": "contain",
        "bg": "#f5f5f5",
        "radius": 8
      }
    },
    {
      "type": "text",
      "bind": "name",
      "x": 10,
      "y": 150,
      "w": 160,
      "h": 24,
      "style": {
        "fontFamily": "Arial",
        "fontSize": 14,
        "fontWeight": 600,
        "textColor": "#111827"
      }
    },
    {
      "type": "text",
      "bind": "description",
      "x": 10,
      "y": 175,
      "w": 160,
      "h": 36,
      "style": {
        "fontSize": 11,
        "textColor": "#6b7280"
      }
    },
    {
      "type": "text",
      "bind": "price",
      "x": 10,
      "y": 215,
      "w": 160,
      "h": 20,
      "link": "https://shop.smartone.com/product/{sku}",
      "linkTarget": "_blank",
      "style": {
        "fontSize": 14,
        "fontWeight": 700,
        "textColor": "#2563eb"
      }
    }
  ]
}

Passende Datenstruktur

{
  "smartphones": [
    {
      "sku": "10001",
      "name": "SmartOne X",
      "description": "Leistungsstarkes OLED-Smartphone mit 5G",
      "price": "799,00 €",
      "image": "https://placehold.co/400x300/png?text=SmartOne+X"
    },
    {
      "sku": "10002",
      "name": "SmartOne X Pro",
      "description": "Flaggschiff mit Periskop-Zoom und 200MP",
      "price": "999,00 €",
      "image": "https://placehold.co/400x300/png?text=SmartOne+X+Pro"
    },
    {
      "sku": "10003",
      "name": "SmartOne Lite",
      "description": "Kompakt und leicht für den Alltag",
      "price": "499,00 €",
      "image": "https://placehold.co/400x300/png?text=SmartOne+Lite"
    }
  ]
}

Workflow im Editor

Repeater aus Palette ziehen – Element auf Canvas platzieren
Datenquelle wählen – Array-Feld aus den Daten auswählen (z.B. "zubehoer")
Vorlage wählen – Produktkarten, Galerie, Liste, etc.
Felder mappen – Jedes Layout-Element mit einem Datenfeld verknüpfen
Styling anpassen – Schriftart, Größe, Farben, Abstände
Links hinzufügen – Optional: URLs mit Platzhaltern