> For the complete documentation index, see [llms.txt](https://biglazytables.gitbook.io/big-lazy-tables/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://biglazytables.gitbook.io/big-lazy-tables/system/module/presentation-model.md).

# Presentation Model

Die [BLT ](/big-lazy-tables/bachelorarbeit-ip6-big-lazy-tables-fur-das-kolibri-toolkit.md)verfügt über ein Model, welches den darzustellenden Zustand beschreibt.

Das Presentation Model sagt **WAS** angezeigt werden soll. In ihm werden Werte abgelegt, welche die View über den [Controller ](/big-lazy-tables/system/module/controller.md)abgreift und anzeigt. 

Ein grosser Teil der Werte im Model sind observierbar und bedienen sich entweder dem [Observable](https://github.com/WebEngineering-FHNW/Kolibri/blob/main/docs/src/kolibri/observable.js) Interface oder dem **ObervableMap** Interface.

Das Model weiss nicht wie viele Views es gibt und lässt sich ausschliesslich durch den Controller bewirtschaften. Es ist ein abstrakter Zustand der Tabelle und wird durch die Präsentation des Zustands durch die [Projektoren ](/big-lazy-tables/system/module/projectors.md)für den Benutzer visualisiert.

Das Model cached die in der Tabelle anzuzeigenden Dateneinträge in einer Map. Diese für die [BLT](/big-lazy-tables/verweise/glossar.md#blt) spezifisch erstellte Struktur übernimmt das Mapping der vom Service erhaltenen Einträge auf ihre Position in der Tabelle bzw. auf ihre Rows. Dabei handelt es sich um eine Erweiterung des Kolibri [Observables](/big-lazy-tables/konzepte/observer-pattern.md) um die [JavaScript Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map). Das API bietet verschiedene Endpunkte. Für die Verwaltung der Tabelleninhalte werden primär folgende verwendet:

* `init()`  - löscht alle bisherigen Items und befüllt die Map mit neuen Items
* `add()`  - fügt der Map ein neues Item hinzu
* `has()`  - gibt Information darüber ob ein Item mit dem übergegebenen Key existiert
* `clear()`  - löscht alle Items
* `getItem()` - gibt den zum übergebenen Key zugehörigen Value zurück
* `size()` - gibt die Grösse des Caches zurück

Der `key` entspricht der Position in der Tabelle als Index und der `value`  enthält den dazugehörigen Dateneintrag.

<details>

<summary>ObservableMap</summary>

```
const ObservableMap = map => {
    ...
    return {
        onAdd: listener => {
            addListeners.push(listener);
            changeListeners.push(listener);
        },
        onDel: listener => {
            delListeners.push(listener);
            changeListeners.push(listener);
        },
        onChange: callback => {
            changeListeners.push(callback);
        },
        onInit: listener => {
            initListeners.push(listener);
        },
        onClear: listener => clearListeners.push(listener),
        add: (key, value) => {
            map.set(key, value);
            addListeners.forEach( listener => listener(key, value));
            changeListeners.forEach( listener => listener(key, value));
        },
        has: key => map.has(key),
        del: key => {
            const value = map.get(key);
            map.delete(key);
            const safeIterateDelete = [...delListeners];
            const safeIterateChange = [...changeListeners];
            safeIterateDelete.forEach( listener => listener(key, value, () => removeDeleteListener(listener) ));
            safeIterateChange.forEach( listener => listener(key, value));
        },
        init: (startKey, valueArray) => {
            map.clear();
            valueArray.forEach((value, index) => map.set(startKey + index, value));
            initListeners.forEach( listener => listener(map));
        },
        getItem: key => map.get(key),
        get: () => map,
        removeAddListener,
        removeDeleteListener,
        clear: () => {
            map.clear();
            clearListeners.forEach( listener => listener());
        },
        size:   ()   => map.size
    }
};
```

</details>

Die Dateneinträge müssen JavaScript Objekte sein und dürfen alle Properties müssen auf dem ersten Level sein. Aus den Property Keys werden die Label für die [Table Columns](/big-lazy-tables/system/module/projectors/table-headers.md) abgeleitet.

```
{
    id: 26,
    name: "Caldwell Michael",
    email: "eu.arcu.morbi@google.ca",
    address: "364-4260 At Avenue",
    region: "Nord-Pas-de-Calais",
    country: "Russian Federation"
}
```

Das Model erhält alle für die Initialisierung benötigten Daten über die [tableConfig](/big-lazy-tables/verweise/glossar.md#tableconfig).