K─▒saca HTMX Nedir ­čÜÇ

HTMX modern taray─▒c─▒ ├Âzelliklerine direkt olarak html i├žinden eri┼čmenizi hedefleyen hafif bir k├╝t├╝phanedir.

├ľrnek olarak a┼ča─č─▒daki html kodu “link t─▒klad─▒─č─▒nda /blog adresine HTTP GET iste─či g├Ânder ve gelen cevab─▒ taray─▒c─▒ sayfas─▒nda a├ž” gibi bir etkile┼čim ├Âzelli─či kazand─▒r─▒r. Bu taray─▒c─▒n─▒n kendinde bulunan bir ├Âzelli─čidir ve js gerekmez.

<a href="/blog">Blog</a>

A┼ča─č─▒da ise ├Ârnek bir HTMX ile html kodu var. Kodun a├ž─▒klamas─▒ ┼č├Âyle :

  • Button t─▒kland─▒─č─▒nda ( hx-trigger=“click” )
  • /clicked adresine http post iste─či at ( hx-post=“/clicked” )
  • Bu http requestten gelen cevab─▒ #parent-div id’si olan elemanla de─či┼čtir. ( hx-target=“#parent-div” )
  • Son olarak hx-swap=”outerHTML” komutu ise bu eleman─▒n tamam─▒n─▒ gelen http cevab─▒yla de─či┼čtir anlam─▒na geliyor.
<button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML"
>
    Bana t─▒kla ve parent div'in i├žeri─čini de─či┼čtir
</button>

Yukar─▒ kod blo─ču size fikir vermi┼čtir. HTMX, html elemanlar─▒na ├Âzellik ekleyerek onlar─▒n dinamik olmas─▒n─▒ sa─čl─▒yor.
Bu s├╝re├žte Javascript yazman─▒za gerek kalmadan sadece html ile dinamik ve sonradan y├╝klenebilen web sayfalar─▒ olu┼čturman─▒z─▒ hedefliyor.

HTMX nas─▒l y├╝klenir

Bu basit k├╝t├╝phaneyi html sayfan─▒z─▒n head k─▒sm─▒na a┼ča─č─▒daki element ile y├╝klemeniz yeterli.

<script src="https://unpkg.com/htmx.org@1.9.8" integrity="sha384-rgjA7mptc2ETQqXoYC3/zJvkU7K/aP44Y+z7xQuJiVnB/422P/Ak+F/AqFR7E4Wr" crossorigin="anonymous"></script>

├ľrnek HTMX tagleri

Baz─▒ en ├žok kullan─▒lan htmx tagleri ┼čunlar :

hx-trigger | event izleme ve haber verme tagi

bu htmx tagi hangi olay oldu─čunda bir ├Âzelli─čin tetiklenece─čini belirtir

├ľrnek olarak “mouseenter” de─či┼čkeni ile fare bir elemana girerse haber verir. A┼ča─č─▒daki kodda da hx-post yaparak imle├ž div’in i├žine girdi─činde /mouse_entered adresine http post request g├Ândermi┼č.

<div hx-post="/mouse_entered" hx-trigger="mouseenter">
    Fare bu alana girdi
</div>

hx-trigger ┼čunlar─▒ ve daha fazlas─▒n─▒ kontrol edebilir ve haber verir : mouseenter, load, click…

hx-post, hx-get | http request tagleri

Peki hx-trigger bir olay─▒ kontrol etti ve haber verdi ┼čimdi ne olacak diyorsan─▒z burada hx-post hx-get gibi HTTP request g├Ânderebilen htmx ├Âzellikleri devreye giriyor.

├ľrnek olarak a┼ča─č─▒daki kod hx-trigger=”click” ile t─▒klama eventini izliyor ve oldu─čunda haber verecek. T─▒kland─▒─č─▒nda ise hx-get=”/clicked” ile /clicked adresine http get request g├Ânderecek. Ba┼čka bir ┼čey yapm─▒yor ­čÖé

<button hx-get="/clicked" hx-trigger="click">
    Bana t─▒klay─▒nca /clicked adresine get request g├Ânderilir
</button>

hx-target | dinamik i├žerik de─či┼čtirme

┼×imdi bir eventi yakalad─▒ktan sonra ve http request de att─▒ktan sonra gelen cevaba g├Âre html i├žeri─čini de─či┼čtirip dinamikli─či sa─člamam─▒z laz─▒m.

hx-target ise ┼ču anki web sayfas─▒nda de─či┼čecek olan elementin referans─▒n─▒ tutuyor. ├ľrnek olarak #price de─či┼čkeni al─▒rsa gelen http cevab─▒ ile id’si price olan eleman─▒ de─či┼čtirir.

Nas─▒l de─či┼čtirece─čini anlamak i├žin bir sonraki elemana ve ├Ârnek koda devam edelim…

hx-swap | html eleman─▒ de─či┼čtirme y├Ântemi se├žmek

hx-target’in karde┼či olan hx-swap html’in nas─▒l de─či┼čtirilece─čine karar veriyor.
Demek istedi─čim ┼ču : id’si price olan html eleman─▒n─▒ komple mi de─či┼čtireyim, i├žindeki yaz─▒y─▒ m─▒ de─či┼čtireyim, mant─▒─č─▒nda.

A┼ča─č─▒daki kod buton t─▒kland─▒─č─▒nda /get_price adresine get iste─či g├Ânderip oradan gelecek olan fiyat rakam─▒n─▒ bekliyor.
Cevap geldi─činde id’si price olan span’─▒n i├žindeki de─čere cevab─▒ yazacak, ├ž├╝nk├╝ hx-swap “innerHTML” olarak ayarland─▒
hx-swap “outerHTML” olsayd─▒ gelen span’─▒ silip yerine gelen cevab─▒ yazmal─▒yd─▒

<button hx-get="/get_price"
    hx-trigger="click"
    hx-target="#price"
    hx-swap="innerHTML"
>
    Bana t─▒kla ve parent div'in i├žeri─čini de─či┼čtir
</button>

<span id="price" >15</span>

Ek kaynaklar

A┼ča─č─▒daki ek kaynaklara da bakabilirsiniz

=> htmx resmi sayfas─▒

100 saniyede htmx nedir (ing)

Yorum b─▒rak─▒n

E-posta hesab─▒n─▒z yay─▒mlanmayacak. Gerekli alanlar * ile i┼čaretlenmi┼člerdir

Scroll to Top