Tasarım Kodlama

Alpine.js Kullanımı ve Örnekleri

Neredeyse her hafta yeni bir JavaScript frameworkü veya kitaplığı çıkıyor. Her biri kendi benzersiz özellikleriyle birlikte geliyor. Burada, Alpine.js adında başka bir JavaScript kitaplığına bakacağız. Vue.js ve jQuery’ye oldukça benzer.

Aşağıda paylaşılan alpinejs örnekleri vscode idesinde alpine@v2.x.x ile test edilmiştir. Bu içeriği alpinejs örnekleri olarak da kullanabilirsiniz.

Bu yazıda neler ele alınacak?

  1. Alpine.js nedir? 2. Alpine ne kadar iyidir?
    • Alpine.js dosya yapısı nedir?
    • Bu framework benim için mi?
    • JQuery ve Alpine.js arasındaki fark nedir?
    • Bu frameworkü jQuery gibi kullanabilir miyiz?
    • Bunu TailwindCSS’de mi kullanıyorlar?
  2. API’si Vue.js’ye eşdeğer olmasına rağmen Alpine.js nasıl daha hafif hale gelebilir?
  3. Kullanım Örnekleri
    • Yükleme
    • x-data
    • x-init
    • x-show
    • x-bind
    • x-bind class
    • x-bind boolean
    • x-text
    • x-html
    • x-if
    • x-for
    • x-on
    • x-on modifiers
    • x-model
    • x-model modifiers
    • x-ref
  4. Sihirli Özellikler
    • $el
    • $refs
    • $event
    • $nextTick
    • $dispatch
    • $watch
  5. Component özelliği nasıl izlenir?
  6. Alpine.js kullanarak Film arama uygulaması oluşturun
  7. Demo

Alpine.js Nedir?

Alpine.js, reaktif ve bildirimsel yapısı ile JavaScript uygulamalarımızı geliştirmemizi sağlayan bir JavaScript frameworküdür. SPA’lar oluşturmak için kullanılmaz, sadece şablonlarınızı güçlendirmek için Angular.js’nin doğasını kullanır.

Alpine.js’nin ana gücü reaktif doğasıdır. Verileri bağlamak için yönergelerini kullanırsınız ve üzerinde yapılan herhangi bir değişiklik, yayılma düzeyine bakılmaksızın tüm uygulamada çalışır. Alpine.js daha çok bir kullanıcı arayüzü etkileşim frameworkü gibidir. Eğer Vue.js veya Angular.js kullandıysanız, özellikle Alpine.js, Angular.js ile aynı sözdizimine sahip olduğundan, kavramak kolaydır.

Alpine.js de bir DOM işleme kitaplığıdır. DOM ile daha az kodla açıklayıcı bir şekilde etkileşim kurmamızı kolaylaştırır. Vanilya JavaScript veya jQuery kullanarak elde edebileceğimizden çok daha azını yaparsınız. Aynı şey, React, Angular çerçeveleriyle de yapılabilir, ancak bu çerçevelerin boyutu uygulamamızı şişirir ve aşırıya kaçmasına neden olur.

Alpine ne kadar iyidir? Gücü Nereden Gelir?

Bağlama ve Sorgulama: Bu, Alpine.js’nin en büyük gücüdür. Alpine.js’de verileri bağlamak ve sorgulamak için x-data, x-show direktiflerini kullanıyoruz, bu direktifler reaktiviteyi verileri bağlamak ve uygulamadaki herhangi bir seviyede verilerde yapılan değişiklikleri yansıtmak için kullanır.

Olaylar: Alpine.js’de click, mouse, key event gibi olaylar oluşturulabilir ve bunları mükemmel bir şekilde yönetir. Ayrıca, özel etkinlikler oluşturulabilir ve tetiklenebilir.

Boyut: Alpine.js, büyük çerçevelerin gücüne sahiptir ve yine de çok küçük paket boyutu 7.1kB gzip ile sıkıştırılmıştır (21.9kB küçültülmüş). jQuery 32.5kB gzip’lenmiş (92.4kB küçültülmüş); Vue.js 22,8kB gzip’lenmiş (63,5kB küçültülmüş); 5kb gzip’lenmiş tepkime; React-Dom 39.4kB gzip’lenmiş (121.1kB küçültülmüş); React + React-Dom 31.8kB gzip’lenmiş (133kB küçültülmüş).

Alpine.js dosya yapısı nedir?

Alpine.js CLI gibi bir dosya yapısına sahip değildir. Gelecekte, bize hızlı bir Alpine.js projesini iskele haline getirmek için kullanabileceğimiz bir CLI aracı verebileceklerini bekleyebiliriz. Tıpkı Vue.js’nin CLI’ı yaptığı gibi.

Şimdilik, dosyaları ve şablonları manuel olarak oluşturuyor ve Alpine.js kitaplığını ekliyoruz. Alpine.js ve Vue.js söz diziminde benzer olduğundan, Alpine.js projelerimizde Vue.js dosya yapısını taklit edebiliriz.

Bu framework benim için mi?

Evet diyebilirim, bu çerçeve kesinlikle size göre. Angular.js, jQuery veya Vue.js dünyasından geliyorsanız, bu çerçevenin onlarla aynı ve çok süper reaktif çalıştığını görürsünüz.

İkinci olarak, Alpine.js diğer çerçevelerden farklı olarak derleme gerektirmez, sadece kitaplığı ekleyin ve başlayın. Sözdiziminin Angular.js, Vue.js ve jQuery’ye aşina olması da büyük bir avantajdır.

JQuery ve Alpine.js arasındaki fark nedir?

Hem Alpine.js hem de jQuery, DOM manipülasyonu için API’ler sağlar.

jQuery, paket boyutu açısından Alpine.js’den daha ağırdır. jQuery 32.5kB gzip’lenmiş, Alpine.js ise 7.1kB gzip’lenmiş. jQuery 92.4kB küçültülmüş, Alpine.js ise 21.1kB’dir. Burada Alpine.js’nin jQuery’den daha hafif çıktığını görüyoruz.

Paket boyutları nedeniyle farklı indirme sürelerine sahiptirler.

Bu frameworkü jQuery gibi kullanabilir miyim?

Alpine.js, projemizdeki DOM işlemlerini basitleştiren bir çerçevedir, bu nedenle jQuery gibi kullanılamaz. Hem Alpine.js hem de jQuery aynı şeyi yapar, ancak Alpine.js HTML şablonu üzerinde çalışırken jQuery JavaScript’ten çalışır.

Alpine.js ve jQuery’de oluşturulan aynı uygulamayı görelim.

Alpine.js versiyonu:

Jquery versiyonu:

Bu uygulama, anahtar değiştirme input olaylarını dinler ve tetiklendiğinde yazılan karakter sayısını günceller.

Alpine.js sürümünde her şeyin HTML şablonunda yapıldığını, tüm JavaScript kodlarının satır içi ifadeler olduğunu görebiliriz.

JQuery sürümünde, kitaplıktaki API’ler DOM’u sorgulamak ve HTML’yi güncellemek için kullanılır. HTML yazılır, ardından jQuery metotlarını kullanarak JavaScript’ten DOM’yi işleriz.

Alpine.js’yi jQuery gibi kullanamayacağımızı görüyoruz.

Bunu TailwindCSS’de mi kullanıyorlar?

Tam olarak değil, ancak Alpine.js ve TailwindCSS ortak teknikleri paylaşıyor.

Alpine.js, TailwindCSS’den ilham aldı, aslında daha önce “JavaScript için Tailwind” olarak adlandırılıyordu.

Alpine.js, TailwindCSS gibi çalışır, TailwindCSS, yazmak için CSS dosyalarına ihtiyaç duymaz senin tarzların oluştur.

Doğrudan biçimlendirmenizde herhangi bir tasarım oluşturmak için oluşturulabilen yardımcı program sınıflarıyla zaten doludur.

Bu nedenle, Alpine.js bundan bir ilham aldı ve bunu, JavaScript şablonları üzerinde çalışmaya gerek kalmadan JS uygulamaları oluşturmak için kullanabileceğimiz yardımcı program yönergelerini sağlayacak şekilde tasarladı.

API’si Vue.js’ye eşdeğer olmasına rağmen Alpine.js nasıl daha hafif olabilir?

Alpine.js ve Vue.js API’leri eşdeğerdir. Örneğin, bunu x-bind: attribute="express" yaparak Alpine.js’deki bir ifadeye bir öznitelik bağlayabiliriz, bunu x-data="express" yaparak Alpine.js’de veri değişkenini ayarlayabiliriz.

Vue.js’de x-‘yi v- ile değiştirmemiz neredeyse aynıdır.

Attribute bağlanma :v-bind:attribute="express" Veri bağlama: v-data="express"

Dolayısıyla, tüm bunlara rağmen Alpine.js çok daha hafiftir çünkü bildirimseldir ve veri değişikliklerini izlerken reaktiviteden yararlanır. Çok fazla kod çıkarıldı ve bu da onu daha hafif hale getirdi.

Yükleme

Alpine.js’yi kullanmaya başlamak kolaydır. CDN bağlantısını kullanarak hızlıca öğreticiye geçebiliriz.

Yukarıdaki 2.x.x sürümüdür. Bir projede kullanacaksanız beklenmeyen davranışları önlemek için sabit bir sürüm numarasını tercih etmenizi tavsiyederim.

NPM kullanarak alpine.js’yi kitaplığa kurmak için;

Ardından scripti dahil ederek kullanabilirsiniz.

Alpine.js 14 yerleşik yönergeye sahiptir. Aşağıdaki bölümlerde temel direktifleri öğreneceğiz.

x-data

Bu yönerge, bir component kapsamındaki verileri bildirmek için kullanılır. Veriler, bildirildiği öğenin alt öğeleri tarafından kullanılabilen özellikleri olan bir nesnedir.

Söz dizimi:

Örnek:

Burada, dış gövdedeki DIV içinde bildirilmiş verilerimiz var. x-data direktifindeki nesne değişmezi, div öğesi kapsamında bir veri oluşturur. Bu veri içinde ad, soyad ve yas değerleri vardır.

DIV öğesi içindeki strong etiketi içinde öğlerimizi görüntüledik. DOM çıktısı aşağıdaki gibi değiştirildi.

x-data değerine, bildirildiği öğenin dışındaki öğelerden erişilemez. Yani, sadece bir elemanın çocukları, eleman üzerinde bildirilen x-data değerine erişebilir. Kardeş öğeler, bitişik öğeler ona erişemez.

Başka bir örnek:

İkinci DIV içine component kapsamındaki ad özelliğini yazdırmayı denedik. x-data componenti kapsamı dışında olduğu için burada ad çalışmayacaktır.

Verileri yeniden kullanılabilir fonksiyonlara çıkarabiliriz. Bu, HTML dosyamızın script bölümünde bir fonksiyon oluşturabileceğimiz anlamına gelir, fonksiyon bir nesne değişmezi döndürür. Nesne, çağrıldığı bileşen kapsamında bildirilecek özellikleri içerecektir.

Bir örnek görelim:

Bakın, init fonksiyonu ad ve setAd adında iki tane özelliği olan bir nesne döndürür. Bu özellikler çağrılan elementin componenti kapsamında tanımlanmıştır.

DIV elementindeki x-data direktifinin init() fonksiyonunu aldığına dikkat edin. Artık özellikler artık div elementinde kullanılabilir duruma gelmiş oldu.

See in the div element, we called the init function in the x-data directive. Now, the properties name and setName are visible to all elements inside the div element.

Alpine.js birden fazla nesneyi karşıltırmak için birden fazla fonksiyonu bir arada kullanmayı desteklemektedir.

Aşağıdaki örneğe bakalım:

Bir nesne oluşturduk, sonra üç noktayı(spread operatör) kullanarak içeriği yok eden iki işlevi çağırdık …. Çalışıyor !!

x-init

Bileşen (component) başlatıldığında bir ifadeyi çalıştırır.

Söz dizimi:

Örneği görelim:

Burada, x-init, div öğesi başlatıldığında veya oluşturulduğunda setDurum() fonksiyonunu çalıştırır. Fonksiyon, div öğesindeki x-data nesnesi değişmez değerindeki durum özelliğini false olarak ayarlar. Bu, div öğesinin oluşturulmasında durum verilerin her zaman false olmasını sağlar.

Kod, bileşen bağlandıktan ve DOM’a ilk güncellemeler yapıldıktan sonra da çalıştırabiliriz.

Bu, x-init yönergesinde bir callback döndürülerek yapılır. Bu callback, Alpine.js DOM için ilk güncellemeleri yaptıktan sonra çalıştırılacaktır.

x-show

x-show ifadenin (true or false) olup olmamasına göre elemente display: none; özelliği ekler veya çıkarır.

Söz dizimi:

Örneğe bakalım:

Veri içeren başka bir örnek:

İlk örnekte gizleGoster fonksiyonu durum değerini değiştirdiği için butona tıkladıkça değer değişecektir. İkinci örnekte componenteki verinin durumu false olduğu için mezuniyet bilgisi görünmeyecektir.

x-bind

Bu direktif, bir öğenin niteliğinin değerini belirlemek için kullanılır. JavaScript ifadesi değerlendirilir ve değerlendirmenin sonucu, belirtilen niteliğin değeri olur.

x-bind ifadesinin bağımlılıkları değiştiğinde, ifade yeniden çalıştırılır, böylece niteliğin değeri yeni değişiklikleri yansıtır.

Söz dizimi:

Örneği inceleyelim:

Butonun disabled özelliğine durum değeri verildiğinde durumun true yada false olmasına bağlı olarak butonu pasifleştirecektir.

DOM içinde şu şekilde oluşacaktır.

Şimdi, durum değerini false olarak değiştirirsek. button nesnesinind disabled özellik değeri false olacaktır.

İfadenin bağımlılıkları değişiklikler için dinlenir, herhangi bir (bağımlılık değerleri değiştiğinde), ifade yeniden değerlendirilir ve bağlı özniteliğin değeri güncellenir.

Alpine.js, binding sınıfı boolean değer nitelikleri için x-bind niteliği sağlar. Bunları aşağıda görelim:

Sınıf özellikleri için x-bind

bu, sınıf özelliklerini bir elemana bağlamak için kullanılır. Bunun değeri, temel özellikleri bağlanacak sınıfların isimleri olan bir nesne ifadesidir. Değerler boolean değerleridir ve true oluyorsa uygulanacağı false oluyorsa uygulanmayacağı anlamına gelir.

Örnek: Bir CSS sınıfımız var:

Alpine.js kodu:

Boolean özellikler için x-bind

x-bind değer özellikleriyle aynı şekilde boolean özelliklerini de destekler. Bunlar bir değişkenin şartlı durum olarak kullanılması veya herhangi bir Javascript ifadesinin true or false olarak döndürülmesidir.

Video öğesinin autoplay özelliği true olarak ayarlandı. çıktı şu olacaktır:

x-text

Örnek: <span x-text="foo"></span>

Söz dizimi: <span x-text="[ifade]"

x-text direktifi x-bind ile benzer şekilde çalışır. Tek fark, x-text bir özelliğin değerini güncellemek yerine, bir elementin innerText özelliğini günceller.

Alpine.js örneğine bakalım:

<P> öğesinde, metni div verilerinde bildirilen text özelliğinin değeri olacaktır.

x-html

Örnek: <span x-html="foo"></span>

Yapı: <span x-html="[expression]"

x-html direktifi x-bind ile benzer şekilde çalışır. Tek fark, x-text bir özelliğin değerini güncellemek yerine, bir elementin innerHTML özelliğini günceller.

:uyarı: Yalnızca güvenilir içerikte kullanın ve asla kullanıcı tarafından sağlanan içerikte kullanmayın. :uyarı:

Üçüncü şahıslardan gelen HTML’ in dinamik olarak işlenmesi açıkça XSS zaaflarına yol açabilir.

Örneğe bakalım:

html özelliği bir HTML dizesi içerir ve biz bunun span öğesinin HTML içeriği olmasını isteriz. Span öğesi üzerinde ayarlanan x-html yönergesi, html özelliğindeki HTML dizesini span öğesinin iç HTML’si olacak şekilde ayarlar.

DOM’daki çıktı şu olacaktır:

x-if

x-if

Örnek: <template x-if="true"><div>Some Element</div></template>

Söz dizimi: <template x-if="[expression]"><div>Some Element</div></template>

x-show ‘in yetersiz olduğu durumlarda (x-show değeri false ise elemente display: none özelliği ekler), bir elementi tamamıyla DOM ‘dan silmek için x-if kullanılabilir.

Örnek:

DOM çıktısı şu şekilde olacaktır.

x-for

x-for

Örnek:

Not: :key ile atama isteğe bağlıdır ama Note: the :key binding is optional, ama ŞİDDETLE tavsiye edilir.

Bir dizinin her bir elemanı için yeni bir DOM düğümü oluşturmak istediğiniz durumlar için x-for vardır. Bu Vue ‘deki x-for etiketine benzerdir. Tek fark, Alpine bu direktifi normal bir DOM elementi üzerinde kullanamaz. Bunun için bir template etiketinin varlığına ihtiyaç duyar.

Örneğe bakalım:

Kod çalıştırıldığında DOM ağacını şu şekilde güncelleyecektir.

x-on

Not: Daha kısa sentaksı “@” kullanabilirsiniz: @click="...".

Örnek: <button x-on:click="foo = 'bar'"></button>

Söz dizimi: <button x-on:[event]="[expression]"></button>

x-on tanımlandığı elemente bir olay dinleyici ekler. Bu olay tetiklendiği zaman, değeri olarak atanan Javascript ifadesi çalıştırılır. x-on özelliğini üzerine eklediğiniz elementin desteklediği bütün olayla için kullanabilirsiniz. Olayların tüm listesine ve muhtemel değerleri için the Event reference on MDN adresine bakınız.

Javascript ifadesinde herhangi bir data güncellenirse o dataya bağlı diğer element özellikleri de güncellenir.

Örnek 1.1:

x-on yönergesini kullanarak bir öğeye bir olay eklemek için, olay adı, x-on özelliğine, iki nokta(:) ile bağlanır. Yukarıda, butona bir tıklama olayı ayarlayın, x-on’daki ifade :click bir fonksiyon ifadesidir. Butona tıklandığında tikla fonksiyonu çalıştırılır.

Örnek 1.2: Yukarıdaki örneği özellik ile de yapabilirsiniz.

Örnek 2:

Örnek 3:

Örnek 4:

Örnek 5:

Tuş Kontrolleri

x-on direktifi ile klavye kontrolleri de kullanabilirsiniz. Aşağıdaki örneklerde ENTER ve YÖN TUŞLARI kullanımına örnekler mevcuttur.

Örnek : ENTER tuşu kullanımı

Örnek : Yön tuşu kullanımı

Örnek : Klavye tuşları kullanımı (a harfine basınca uyarı verme)

x-model

Örnek: <input type="text" x-model="foo">

Söz dizimi: <input type="text" x-model="[data item]">

x-model özelliği elemente “çift yönlü bağlama” ekler. Yani, input elementinin değeri bileşenin veri öğesiyle senkronize tutulur.

Not: x-model metin girişleri, onay kutuları, radyo düğmeleri, metin alanları, seçimler ve çoklu seçimler üzerindeki değişiklikleri tespit edecek kadar zekidir. Bu how Vue would adresindeki senaryolara uygun çalışması gerekir.

.number belirteci Örnek: <input x-model.number="age">

number belirteci girişin değerini bir numaraya çevirir. Eğer giriş değeri geçerli bir numaraya çevrilemeyecekse, orjinal değer döndürülür.

.debounce belirteci Example: <input x-model.debounce="search">

The debounce belirteci bir değer güncellemesine bir “dalgalı tıklama engelleyici” ekler. Başka bir deyişle, olay yakalayıcısı, son olayın tetiklenmesi üzerinden belli bir zaman geçmedikçe çalışmaz. Yakalayıcı tekrar çağrılmaya hazır olduğunda, en son ki yakalayıcı cağrısı çalışır.

Varsayılan engelleme süresi 250 milisaniyedir.

x-model değiştirici

Bir girdiye uygulandığında .number değiştiricisi, girdinin değerini bir sayıya dönüştürür.

Örnek:

Bir diğeri de .debounce değiştiricisi, bu harika. Bu, kodumuza kolayca geri bildirim eklememize yardımcı olur. Bu değiştirici, işleyicinin bağlı olduğu işleyiciyi belirli bir süre geçene kadar çalıştırmamasını sağlar. Yani, işleyici çalışmadan önce belirli bir süre bekleyecektir.

Örnek:

Şimdi, text kutusuna yazdığımızda, text kutusunun değeri veri özelliğine atanacak. .debounce değiştiricisini eklediğimizden, veri özelliği text değeri girdiğinde almayacak, atanmadan önce 250ms bekleyecek. Yani eğer zaman geçmeden veri’ye erişmeye çalışırsak verinin eski değerini alacağız.

Not: 250ms, Alpine.js tarafından ayarlanan .debounce değiştiricisi için varsayılan zamandır. Zamanı kendimiz ayarlayabiliriz.

x-ref

Bu yönerge, uygulandığı öğelerin DOM’una erişmek ve almak için kullanılır. x-ref‘i bir öğede ayarlamak için şunu yaparız:

Şimdi, x-ref direktifini iki bölüme ayarlıyoruz. x-ref direktifinin değeri Alpine.js tarafından $refs nesnesine ayarlanacaktır. $refs nesnesinden, DOM’a erişmek istediğimiz elemana x-ref yönergesindeki değerle başvurabiliriz. Direktif ile özelliğe iki şekilde ulaşabiliriz. İçerideki değeri değiştirmek için innerText kullanılırken HTML düzenlemesi için innerHTML ifadesini kullanabiliriz.

Sihirli Özellikler

Bu özelliklerin Alpine.js projemiz üzerinde büyülü bir etkisi var. Projemizde ve yerleşik olarak global değişkenler olarak bulunurlar Aşağıdaki bölümlerde göreceğiz.

$el

Bu sihirli özellik, kök bileşen kapsamının DOM’una erişir ve onu alır.

$refs

Üzerinde x-ref yönergesi bulunan öğelerin DOM referansını tutar.

Yada daha kısa şekilde @click metodu içine kodları yazabiliriz.

$event

$event, tarayıcıların yerel Olay Nesnesine erişmek için kullanılır. Bu, normal JS uygulamalarında olay işleyicilerinde aldığımız varsayılan e gibi çalışır.

Bir nesne içinde kullanmak için de this anahtarını kullanabilirsiniz.

Bakın, olay fonksiyonuna $event‘ı parametre olarak gönderiyoruz, bu durumda, ifadede olay içinde çağrılır ve $event magic özelliğini iletir.

$nextTick

Bir callback’e geçirilen bu sihirli özellik,callback fonksiyonu yalnızca Alpine.js güncellemelerini yaptığında çağrılır.

Yukarıdaki koda bakın, kapsamımızda başlangıç değeri ‘Elma’ olan bir metin özelliğimiz var.

Butona metni, x-text yönergesi kullanılarak text özelliğinin değerine göre belirlenir.

Butonun içinde ona eklenmiş bir tıklama olayımız vardır. İşleyici tıklandığında text özelliğinin değerini “Armut” olarak ayarlar ve $nextTick magic özelliğini çağırır. Şimdi, $nextTick‘teki callback, buton metnini günlüğe kaydeder. Buton tıklandığında, $ içindeki callback text = ‘Armut’ tarafından yapılan DOM güncellemesi tamamlanana kadar nextTick asla çağrılmaz. Bu nedenle, buton metni olarak “Elma” yerine “Armut” ifadesini göreceğiz.

$dispatch

Bu sihirli özellik, Alpine.js’de özel olayları sevk etmek, tetiklemek veya yıkmak için kullanılır.

Aşağıdaki gibi çağrılır.

Örnek kullanım:

Örnek 2:

Bu örnekte, bu @c olayını yaparak div üzerinde özel bir olay ayarladık, bu, tetiklendiğinde bir metni günlüğe kaydeden bir işleyiciye sahip bir olay haline gelir. olay adında c-event ve olay işleyici olay işleyici argümanlarına erişmek için $event.detail nesnesini kullanıyoruz. $dispatch özelliği tarafından gönderilen değiştirgeleri içerir.

Örnek 3:

Tüm bunlar, $dispatch’e Alpine.js ifadeleri aracılığıyla erişirken. Buna JavaScript’te, bir fonksiyon çağırsı iletirken arg olarak ileterek erişebiliriz.

$watch

Bu sihirli yöntem, bir bileşen özelliğindeki değişiklikleri “izlemek” veya “dinlemek” için kullanılır.

Söz dizimine buradan bakın:

Basit bir örneği inceleyelim:

x-data direktifindeki open özelliği @click yöntemi ile değişmektedir.  x-init direktifine geçirdiğimiz @watch sihirli özelliği ile open özelliğinin değişen durumu kontrol edilmekte ve her değişimde console içindeki değer yazdırılmaktadır. Burada $wacth özelliği verilerin değişimlerini kontrol edip bir fonksiyon çalıştırmak için kullanılmaktadır.

Bileşen Özellikleri Nasıl İzlenir?

Alphie.js, yeni bir bileşen kapsamı bildirmek için x-data direktifini kullanır. Alpine.js bileşen kapsamındaki bir özelliği “izlemek” için x-model direktifini kullanırız.

x-data yönergesi, div öğesinde yeni bir bileşen kapsamı bildirir. Bileşenin boş bir dizge olan bir “name” özelliği vardır.

x-modeli, bileşen kapsamındaki name özelliği olan izlenecek özelliğin adına atanır. x-model, ad özelliğini girdi alanına bağlar, böylece girdi alanı değeri “ad” özelliği buna göre değişir ve özelliği yansıtan UI da değişiklikleri yansıtır.

Alpine.js Örnek Uygulama

Örnek uygulama albüm kapaklarını isimlerini listeleyen basit bir uygulamadan oluşacaktır. Uygulamada alpine.js ile tailwindcss kütüphaneleri CDN olarak dışarıdan yüklenmiştir.

Uygulamadaki JSON dosyası ise https://jsonplaceholder.typicode.com/ adresinden alınarak kullanılmıştır.

Örnek uygulamanın kodları:

Uygulamada init() fonksiyonunu x-data direktirifine iletttik. ardından butona tıklandığında text kutusundaki değeri almak için text kutusunu x-modal=”q” ile q özelliğine bağladık. Butona tıklandığında da arama() fonksiyonu çalışması için @click=”arama()” işlevini ilettik.

Arama işlemini gerçekleştirmek için fetcth fonksiyonu ile JSON dosyamızın alınacağı adresi belirtip dönen değeri sonuclar özelliğine atadık.

HTML kısmında verileri göstermek için <template  x-for=”sonuc in sonuclar”> direktifini kullanarak verileri listeledik.

Uygulamanın kodlarını kopyalayıp çalıştırdığınızda ekran çıktısı aşağıdaki gibi olacaktır.

Sonuç Olarak

Alpine.js hakkında çok şey öğrendik. Alpine.js kullanmanın avantajlarıyla başladık. Daha sonra, Alpine.js lib’nin CDN ve NPM’den nasıl kurulacağını öğrendik. Daha sonra, temel Alpine.js direktiflerini öğrendik, her birini nasıl çalıştıklarına dair bir demo örnekleri ile öğrendik.

Eğer bununla veya eklemem gereken, düzeltmem veya kaldırmam gereken herhangi bir sorunuz varsa, yorum yapmaktan, veya bana mesaj atmaktan çekinmeden mesaj atabilirsiniz.

Kaynak:

https://github.com/alpinejs/alpine/blob/master/README.tr.md#x-bind

https://codepen.io/smashingmag/pen/QWbMBJj

https://codewithhugo.com/alpinejs-x-on/

https://stackoverflow.com/questions/62963333/trigger-change-event-after-click-event-in-alpine-js

Yorum yap