Chytré HTML atributy
********************

.[perex]
Latte 3.1 přichází se sadou vylepšení, která se zaměřuje na jednu z nejčastějších činností v šablonách – vypisování HTML atributů. Přináší více pohodlí, flexibility a bezpečnosti.


Boolean atributy
================

HTML používá speciální atributy jako `checked`, `disabled`, `selected` nebo `hidden`, u kterých nezáleží na konkrétní hodnotě – pouze na jejich přítomnosti. Fungují jako jednoduché příznaky.

Latte je zpracovává automaticky. Atributu můžete předat jakýkoliv výraz. Pokud je pravdivý (truthy), atribut se vykreslí. Pokud je nepravdivý (falsey - např. `false`, `null`, `0` nebo prázdný řetězec), atribut se zcela vynechá.

To znamená, že se můžete rozloučit se složitými podmínkami nebo `n:attr` a jednoduše použít:

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

Pokud `$isDisabled` je `false` a `$isReadOnly` je `true`, vykreslí se:

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

Pokud potřebujete přepínací chování pro standardní atributy, které nemají toto automatické zpracování (tedy např. atributy `data-` nebo `aria-`), použijte filtr [toggle |filters#toggle].


Hodnoty null
============

Toto je jedna z nejpříjemnějších změn. Dříve, pokud byla proměnná `null`, vypsala se jako prázdný řetězec `""`. To často vedlo k prázdným atributům v HTML jako `class=""` nebo `title=""`.

V Latte 3.1 platí nové univerzální pravidlo: **Hodnota `null` znamená, že atribut neexistuje.**

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

Pokud `$title` je `null`, výstupem je `<div></div>`. Pokud obsahuje řetězec, např. "Ahoj", výstupem je `<div title="Ahoj"></div>`. Díky tomu nemusíte obalovat atributy do podmínek.

Pokud používáte filtry, mějte na paměti, že obvykle převádějí `null` na řetězec (např. prázdný řetězec). Abyste tomu zabránili, použijte [nullsafe filtr |filters#Nullsafe filtry] `?|`:

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


Třídy (Classes)
===============

Atributu `class` můžete předat pole. To je ideální pro podmíněné třídy: pokud je pole asociativní, klíče se použijí jako názvy tříd a hodnoty jako podmínky. Třída se vykreslí pouze v případě, že je podmínka splněna.

```latte
<button class={[
	btn,
	btn-primary,
	active => $isActive,
]}>Stiskni mě</button>
```

Pokud je `$isActive` true, vykreslí se:

```latte
<button class="btn btn-primary active">Stiskni mě</button>
```

Toto chování není omezeno pouze na `class`. Funguje pro jakýkoliv HTML atribut, který očekává seznam hodnot oddělených mezerou, jako jsou `itemprop`, `rel`, `sandbox` atd.

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


Styly (Styles)
==============

Atribut `style` také podporuje pole. Je to obzvláště užitečné pro podmíněné styly. Pokud položka pole obsahuje klíč (CSS vlastnost) a hodnotu, vlastnost se vykreslí pouze v případě, že hodnota není `null`.

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

Pokud je `$isVisible` false, vykreslí se:

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


Data atributy
=============

Často potřebujeme do HTML předat konfiguraci pro JavaScript. Dříve se to dělalo přes `json_encode`. Nyní můžete atributu `data-` jednoduše předat pole nebo objekt stdClass a Latte jej serializuje do JSONu:

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

Vypíše:

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

Také `true` a `false` se vykreslují jako řetězce `"true"` a `"false"` (tj. validní JSON).


Aria atributy
=============

Specifikace WAI-ARIA vyžaduje textové hodnoty `"true"` a `"false"` pro logické hodnoty. Latte to pro atributy `aria-` řeší automaticky:

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

Vypíše:

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


Typová kontrola
===============

Už jste někdy viděli `<input value="Array">` ve svém vygenerovaném HTML? Je to klasická chyba, která často projde bez povšimnutí. Latte zavádí přísnou typovou kontrolu pro HTML atributy, aby byly vaše šablony vůči takovým přehlédnutím odolnější.

Latte ví, které atributy jsou které a jaké hodnoty očekávají:

- **Standardní atributy** (jako `href`, `id`, `value`, `placeholder`...) očekávají hodnotu, kterou lze vykreslit jako text. To zahrnuje řetězce, čísla nebo stringable objekty. Také je akceptováno `null` (atribut vynechá). Pokud však omylem předáte pole, boolean nebo obecný objekt, Latte vyvolá varování a neplatnou hodnotu inteligentně ignoruje.
- **Boolean atributy** (jako `checked`, `disabled`...) akceptují jakýkoliv typ, protože jejich přítomnost je určena logikou pravdivý/nepravdivý.
- **Chytré atributy** (jako `class`, `style`, `data-`...) specificky zpracovávají pole jako validní vstupy.

Tato kontrola zajišťuje, že vaše aplikace nebude produkovat neočekávané HTML.


Migrace z Latte 3.0
===================

Protože se změnilo chování `null` (dříve vypisovalo `""`, nyní atribut vynechá) a atributů `data-` (boolean hodnoty vypisovaly `"1"`/`""`, nyní `"true"`/`"false"`), možná budete muset aktualizovat své šablony.

Pro hladký přechod poskytuje Latte migrační režim, který upozorňuje na rozdíly. Přečtěte si podrobného průvodce [Migrace z Latte 3.0 na 3.1 |cookbook/migration-from-latte-30].

[* html-attributes.webp *]