ListView

Źródło: views/ListView.js

ListView

Lista renderowana na podstawie danych pobranych z VarStore (zmienne lokalne/strony/globalne). Reaguje reaktywnie na zmiany zmiennych – automatycznie przerenderowuje się gdy zmienna się zmieni.

Schema

type: listvar
id: myList
varPath: "$page.orders"
emptyMessage: Brak wyników
template:
  type: text
  content: "{{ name }}"

Parametry

• type - Typ widoku: "listvar"
• id - Identyfikator widoku
• varPath - Ścieżka do zmiennej w VarStore (wymagane):
  • $page.<key> – zmienna strony (akcja setPageVar)
  • $global.<key> – zmienna globalna (akcja setGlobalVar)
  • $props.<key> – props komponentu (wewnątrz szablonu komponentu; zobacz ComponentView)
  • <viewId> – dane innego widoku (np. DynamicListView, DataTableView)
  • <viewId>.<nested> – zagnieżdżone pole z danych widoku
• emptyMessage - Komunikat gdy lista jest pusta (opcjonalne)
• limit [template] - Maksymalna liczba wyświetlanych elementów (opcjonalne)
• template - Szablon dla każdego elementu listy (wymagane)

Obsługiwane eventy

• reload:{id} – Wymusza ponowne odczytanie danych z VarStore i przerenderowanie.

Przykłady użycia

Lista ze zmiennej globalnej

type: listvar
id: productList
varPath: "$global.products"
emptyMessage: Brak produktów
template:
  type: text
  content: "{{ name }} – {{ price }} PLN"

Lista z danych innego widoku

type: listvar
id: orderItemsList
varPath: ordersTable
emptyMessage: Brak pozycji
template:
  type: card
  title: "{{ ordersTable.$.name }}"
  content:
    type: text
    content: "{{ ordersTable.$.amount }} PLN"