Smarte HTML-Attribute
*********************

.[perex]
Latte 3.1 kommt mit einer Reihe von Verbesserungen, die sich auf eine der häufigsten Tätigkeiten in Templates konzentrieren - das Ausgeben von HTML-Attributen. Sie bringen mehr Komfort, Flexibilität und Sicherheit.


Boolesche Attribute
===================

HTML kennt besondere Attribute wie `checked`, `disabled`, `selected` oder `hidden`, bei denen der konkrete Wert bedeutungslos ist - es zählt nur ihre Anwesenheit. Sie wirken als einfache Flags.

Latte behandelt sie automatisch. Sie können dem Attribut einen beliebigen Ausdruck übergeben. Ist er truthy, wird das Attribut gerendert. Ist er falsey (z. B. `false`, `null`, `0` oder ein leerer String), entfällt das Attribut vollständig.

Sie können sich damit von umständlichen Bedingungen und `n:attr` verabschieden und einfach schreiben:

```latte
<input type="text" disabled={$isDisabled} readonly={$isReadOnly}>
```

Ist `$isDisabled` gleich `false` und `$isReadOnly` gleich `true`, wird gerendert:

```latte
<input type="text" readonly>
```

Brauchen Sie dieses Umschaltverhalten bei gewöhnlichen Attributen, die diese automatische Behandlung nicht haben (etwa `data-` oder `aria-`), verwenden Sie den Filter [toggle |filters#toggle].


Null-Werte
==========

Das ist eine der angenehmsten Änderungen. Bisher wurde eine Variable mit dem Wert `null` als leerer String `""` ausgegeben. Das führte oft zu leeren Attributen im HTML wie `class=""` oder `title=""`.

In Latte 3.1 gilt eine neue allgemeine Regel: **Der Wert `null` bedeutet, dass das Attribut nicht existiert.**

```latte
<div title="{$title}"></div>
```

Ist `$title` gleich `null`, lautet die Ausgabe `<div></div>`. Enthält es einen String, z. B. "Hallo", lautet die Ausgabe `<div title="Hallo"></div>`. Dadurch müssen Sie Attribute nicht in Bedingungen einpacken. Diese Regel gilt, wenn der gesamte Wert des Attributs ein einziger Ausdruck `{...}` ist; in einem gemischten Wert wie `title="foo {$bar}"` wird `null` als leerer String gerendert.

Wenn Sie Filter verwenden, denken Sie daran, dass diese `null` meist in einen String umwandeln (z. B. in einen leeren String). Um das zu verhindern, verwenden Sie den [Nullsafe-Filter |filters#Nullsafe-Filter] `?|`:

```latte
<div title="{$title?|upper}"></div>
```


Klassen
=======

Dem Attribut `class` können Sie ein Array übergeben. Das eignet sich hervorragend für bedingte Klassen: Ist das Array assoziativ, dienen die Schlüssel als Klassennamen und die Werte als Bedingungen. Die Klasse wird nur gerendert, wenn die Bedingung wahr ist.

```latte
<button class={[
	btn,
	btn-primary,
	active => $isActive,
]}>Drück mich</button>
```

Ist `$isActive` wahr, wird gerendert:

```latte
<button class="btn btn-primary active">Drück mich</button>
```

Dieses Verhalten beschränkt sich nicht auf `class`. Es funktioniert für eine ausgewählte Menge von Attributen, die eine durch Leerzeichen getrennte Liste von Werten erwarten: `accesskey`, `class`, `headers`, `itemprop`, `ping`, `rel`, `role`, `sandbox` und alle `aria-*`-Attribute. Bei jedem anderen Attribut löst die Übergabe eines Arrays eine Warnung aus und der Wert entfällt.

```latte
<a rel={[nofollow, noopener, external => $isExternal]}>Link</a>
```


Styles
======

Auch das Attribut `style` unterstützt Arrays. Besonders nützlich ist das für bedingte Styles. Enthält ein Array-Element einen Schlüssel (CSS-Eigenschaft) und einen Wert, entfällt die Eigenschaft, wenn der Wert `null`, `false`, `0` oder ein leerer String ist - so wird zum Beispiel `opacity => 0` nicht gerendert.

```latte
<div style={[
	background => lightblue,
	display => $isVisible ? block : null,
	font-size => '16px',
]}></div>
```

Ist `$isVisible` falsch, wird gerendert:

```latte
<div style="background: lightblue; font-size: 16px"></div>
```


Data-Attribute
==============

Oft müssen wir Konfiguration für JavaScript ins HTML übergeben. Bisher geschah das über `json_encode`. Nun können Sie einem `data-`-Attribut einfach ein Array oder ein stdClass-Objekt übergeben, und Latte serialisiert es nach JSON:

```latte
<div data-config={[ theme: dark, version: 2 ]}></div>
```

Ausgabe:

```latte
<div data-config='{"theme":"dark","version":2}'></div>
```

Außerdem werden `true` und `false` als die Strings `"true"` und `"false"` gerendert (also als gültiges JSON).


Aria-Attribute
==============

Die Spezifikation WAI-ARIA verlangt für boolesche Werte die Textwerte `"true"` und `"false"`. Latte erledigt das für `aria-`-Attribute automatisch:

```latte
<button aria-expanded={=true} aria-checked={=false}></button>
```

Ausgabe:

```latte
<button aria-expanded="true" aria-checked="false"></button>
```

Genau wie `class` akzeptieren auch `aria-`-Attribute ein Array. Es wird als durch Leerzeichen getrennte Liste behandelt: einfache Werte werden übernommen, wie sie sind, und ein Schlüssel wird nur dann aufgenommen, wenn sein Wert `true` ist:

```latte
<span aria-labelledby={[title, description => $hasDescription]}></span>
```


Typprüfung
==========

Haben Sie in Ihrem erzeugten HTML schon einmal `<input value="Array">` gesehen? Das ist ein klassischer Fehler, der oft unbemerkt bleibt. Latte führt eine strenge Typprüfung für HTML-Attribute ein, damit Ihre Templates gegen solche Versehen widerstandsfähiger werden.

Latte weiß, welches Attribut welches ist und welche Werte es erwartet:

- **Gewöhnliche Attribute** (wie `href`, `id`, `value`, `placeholder`…) erwarten einen Wert, der sich als Text ausgeben lässt. Dazu zählen Strings, Zahlen oder Objekte, die sich in einen String umwandeln lassen. Auch `null` wird akzeptiert (es lässt das Attribut entfallen). Übergeben Sie jedoch versehentlich ein Array, einen booleschen Wert oder ein beliebiges Objekt, löst Latte eine Warnung aus und ignoriert den ungültigen Wert auf intelligente Weise.
- **Boolesche Attribute** (wie `checked`, `disabled`…) akzeptieren jeden Typ, denn über ihre Anwesenheit entscheidet die truthy/falsey-Logik.
- **Smarte Attribute** (wie `class`, `style`, `data-`…) behandeln Arrays gezielt als gültige Eingabe.

Diese Prüfung sorgt dafür, dass Ihre Anwendung kein unerwartetes HTML erzeugt.


Migration von Latte 3.0
=======================

Da sich das Verhalten von `null` (bisher wurde `""` ausgegeben, nun entfällt das Attribut) und der `data-`-Attribute (boolesche Werte gaben bisher `"1"`/`""` aus, nun `"true"`/`"false"`) geändert hat, müssen Sie Ihre Templates womöglich anpassen.

Für einen reibungslosen Übergang bietet Latte einen Migrationsmodus, der die Unterschiede hervorhebt. Lesen Sie die ausführliche Anleitung [Migration von Latte 3.0 auf 3.1|cookbook/migration-from-latte-30].

[* html-attributes.webp *]