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
