Akıllı HTML nitelikleri
***********************

.[perex]
Latte 3.1, şablonlardaki en yaygın işlerden birine, HTML niteliklerini yazdırmaya odaklanan bir dizi iyileştirmeyle geliyor. Daha fazla rahatlık, esneklik ve güvenlik getiriyor.


Boole nitelikleri
=================

HTML, `checked`, `disabled`, `selected` veya `hidden` gibi, somut değerin önemsiz olduğu, yalnızca varlığının önem taşıdığı özel nitelikler kullanır. Basit bayraklar gibi davranırlar.

Latte onları otomatik olarak halleder. Niteliğe herhangi bir ifade verebilirsiniz. Doğru değerliyse nitelik render edilir. Yanlış değerliyse (örneğin `false`, `null`, `0` veya boş dize), nitelik tamamen atlanır.

Bu, zahmetli makro koşullarına veya `n:attr`'ye veda edip yalnızca şunu kullanabileceğiniz anlamına gelir:

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

`$isDisabled` `false` ve `$isReadOnly` `true` ise şunu render eder:

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

Bu otomatik işleme sahip olmayan standart nitelikler için (örneğin `data-` veya `aria-` nitelikleri) bu açma-kapama davranışına ihtiyacınız varsa, [toggle |filters#toggle] filtresini kullanın.


Null değerler
=============

Bu, en hoş değişikliklerden biridir. Önceden bir değişken `null` ise boş dize `""` olarak yazdırılıyordu. Bu sıklıkla HTML'de `class=""` veya `title=""` gibi boş niteliklere yol açıyordu.

Latte 3.1'de yeni bir evrensel kural geçerlidir: **`null` değeri, niteliğin var olmadığı anlamına gelir.**

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

`$title` `null` ise çıktı `<div></div>` olur. Bir dize içeriyorsa, örneğin "Hello", çıktı `<div title="Hello"></div>` olur. Bu sayede nitelikleri koşullara sarmanız gerekmez. Bu kural, niteliğin tüm değeri tek bir `{...}` ifadesi olduğunda geçerlidir; `title="foo {$bar}"` gibi karışık bir değerde `null`, boş dize olarak render edilir.

Filtre kullanıyorsanız, onların `null`'ı genellikle bir dizeye (örneğin boş dizeye) dönüştürdüğünü unutmayın. Bunu önlemek için [nullsafe filtresini |filters#Nullsafe filtreler] `?|` kullanın:

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


Sınıflar
========

`class` niteliğine bir dizi verebilirsiniz. Bu, koşullu sınıflar için mükemmeldir: dizi ilişkiselse, anahtarlar sınıf adı, değerler ise koşul olarak kullanılır. Sınıf yalnızca koşul doğruysa render edilir.

```latte
<button class={[
	btn,
	btn-primary,
	active => $isActive,
]}>Press me</button>
```

`$isActive` doğruysa şunu render eder:

```latte
<button class="btn btn-primary active">Press me</button>
```

Bu davranış `class` ile sınırlı değildir. Boşlukla ayrılmış bir değer listesi bekleyen seçili bir nitelik kümesi için çalışır: `accesskey`, `class`, `headers`, `itemprop`, `ping`, `rel`, `role`, `sandbox` ve tüm `aria-*` nitelikleri. Başka herhangi bir nitelikte dizi vermek bir uyarı tetikler ve değer atılır.

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


Stiller
=======

`style` niteliği de dizileri destekler. Özellikle koşullu stiller için yararlıdır. Bir dizi öğesi bir anahtar (CSS özelliği) ve bir değer içeriyorsa, değer `null`, `false`, `0` veya boş dize olduğunda özellik atlanır; yani örneğin `opacity => 0` render edilmez.

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

`$isVisible` yanlışsa şunu render eder:

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


Data nitelikleri
================

Çoğu zaman JavaScript için yapılandırmayı HTML'e aktarmamız gerekir. Önceden bu `json_encode` ile yapılıyordu. Artık bir `data-` niteliğine yalnızca bir dizi veya stdClass nesnesi verebilirsiniz, Latte onu JSON'a serileştirir:

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

Şunu üretir:

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

Ayrıca `true` ve `false`, `"true"` ile `"false"` dizeleri olarak render edilir (yani geçerli JSON).


Aria nitelikleri
================

WAI-ARIA belirtimi, boole değerleri için `"true"` ve `"false"` metin değerlerini gerektirir. Latte bunu `aria-` nitelikleri için otomatik halleder:

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

Şunu üretir:

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

Tıpkı `class` gibi, `aria-` nitelikleri de bir dizi kabul eder. Boşlukla ayrılmış bir liste gibi ele alınır: düz değerler oldukları gibi kullanılır, bir anahtar ise yalnızca değeri `true` olduğunda eklenir:

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


Tip denetimi
============

Üretilen HTML'inizde hiç `<input value="Array">` gördünüz mü? Bu, çoğu zaman fark edilmeyen klasik bir hatadır. Latte, şablonlarınızı böyle gözden kaçmalara karşı daha dayanıklı kılmak için HTML nitelikleri üzerinde katı tip denetimi getirir.

Latte hangi niteliğin ne olduğunu ve hangi değerleri beklediğini bilir:

- **Standart nitelikler** (`href`, `id`, `value`, `placeholder` gibi) metin olarak render edilebilecek bir değer bekler. Buna dizeler, sayılar veya dizeye dönüştürülebilir nesneler dahildir. `null` da kabul edilir (niteliği düşürür). Ancak yanlışlıkla bir dizi, boole veya genel bir nesne verirseniz, Latte bir uyarı tetikler ve geçersiz değeri akıllıca yok sayar.
- **Boole nitelikleri** (`checked`, `disabled` gibi) her tipi kabul eder, çünkü varlıkları doğru/yanlış mantığıyla belirlenir.
- **Akıllı nitelikler** (`class`, `style`, `data-` gibi) dizileri özellikle geçerli girdi olarak ele alır.

Bu denetim, uygulamanızın beklenmedik HTML üretmemesini sağlar.


Latte 3.0'dan geçiş
===================

`null` davranışı (eskiden `""` yazdırıyordu, artık niteliği düşürüyor) ve `data-` nitelikleri (boole'ler eskiden `"1"`/`""` yazdırıyordu, artık `"true"`/`"false"`) değiştiğinden, şablonlarınızı güncellemeniz gerekebilir.

Sorunsuz bir geçiş için Latte, farkları vurgulayan bir geçiş modu sunar. Ayrıntılı kılavuzu okuyun: [Latte 3.0'dan 3.1'e geçiş|cookbook/migration-from-latte-30].

[* html-attributes.webp *]