KnockoutJS Event(Olay) Fonksiyonu Oluşturma

Bu yazımızda KnockoutJS mimarisinde Event(Olay) fonksiyonu oluşturmayı göreceğiz.Eğer takipçimseniz yüksek ihtimal anlamışsınızdır ki, ben bir konuyu ya da yapıyı genellikle senaryolandırmadan yazıya dökmeyi sevmem.O yüzden bu basit işlem içinde küçük bir senaryo tasarladım.Şimdi bir futbol takımı oluşturacağız ve template yapısıyla bu takımı listelettireceğiz.Bunun yanında bu listeye ekleme – çıkarma event fonksiyonlarını göstereceğiz.

Hemen bir futbolcuyu basit düzeyde modelleyelim.

    function Futbolcu(Adi, Soyadi, Numarasi) {
        return {
            Adi: Adi,
            Soyadi: Soyadi,
            Numarasi: Numarasi
        };
    }

Ardından ViewModel katmanımızı oluşturup, futbolcularımızdan oluşan bir dizi oluşturalım.

    function FutbolTakimiVM() {
        Futbolcular = ko.observableArray([
            new Futbolcu("Gençay", "Yıldız", 1),
            new Futbolcu("Selman", "Candemir", 2),
            new Futbolcu("Oya", "Başak", 3),
            new Futbolcu("Derya", "Başak", 4)
        ]);
    }

Gördüğünüz gibi ViewModelimizi oluşturduk ve içerisinde Futbolcular isminde bir futbolcu dizisi tanımladık.(isimlere fazla takılmayalım lütfen, futbolu hiç takip etmediğim için internetten teker teker oyuncu aramaktan üşendim)

Şimdi öncelikle elimizdeki bu dizi listeleyelim.

<div>
    Futbolcu Sayısı : <label data-bind="text: Futbolcular().length"></label>
    <ul data-bind="template: { name: 'FutbolcularTemplate', foreach: Futbolcular }"></ul>
</div>

<script id="FutbolcularTemplate" type="text/html">
    <li>
        <span data-bind="text: Adi"></span>&nbsp;<span data-bind="text: Soyadi"></span>
        -
        <span data-bind="text: Numarasi"></span>
    </li>
</script>

Buraya kadar herşey tamam.Sıra futbolcuların bilgilerini alan bir form düzenlemeye geldi.

<div>
    Futbolcu Sayısı : <label data-bind="text: Futbolcular().length"></label>
    <ul data-bind="template: { name: 'FutbolcularTemplate', foreach: Futbolcular }"></ul>
</div>
<div>
    <strong>Adı : </strong><input data-bind="value: _Adi" /><br />
    <strong>Soyadı : </strong><input data-bind="value: _Soyadi" /><br />
    <strong>Numarası : </strong><input data-bind="value: _Numarasi" /><br />
    <button data-bind="click: FutbolcuEkle">Futbolcu Ekle</button>                 
</div>

<script id="FutbolcularTemplate" type="text/html">
    <li>
        <span data-bind="text: Adi"></span>&nbsp;<span data-bind="text: Soyadi"></span>
        -
        <span data-bind="text: Numarasi"></span>
    </li>
</script>

Formumuzuda ilgili html kodları arasında düzenlediğim için komple yukarıdaki html yapısının eklenmiş halini yazdım.

Yukarıdaki kod bloğunda yaptıklarımızı irdeleyelim.
Gördüğünüz gibi form yapımızda verileri alacağımız input elemanları eklenmiş ve bu elemanlara data-bind ile belirli propertyler bağlanmıştır.Birazdan bu propertyleri oluşturup, inputlardaki verileri elde edeceğiz.Lakin burada asıl dikkat etmeniz gereken ve konumuzun ana teması olan button elemanındaki data-bind’a verilen “click:FutbolcuEkle” komutudur.Button elemanımız tıklandığında(yani click tetiklendiğinde) bir olay yaratılacaktır.İşte bu olay neticesinde “FutbolcuEkle” fonksiyonu devreye girecektir.Bu şekilde eventımızı oluşturmuş olacağız.

Şimdi ViewModelimizde aşağıdaki değişiklikleri inceleyiniz.

    function FutbolTakimiVM() {
        _Adi = "";
        _Soyadi = "";
        _Numarasi = "";

        Futbolcular = ko.observableArray([
            new Futbolcu("Gençay", "Yıldız", 1),
            new Futbolcu("Selman", "Candemir", 2),
            new Futbolcu("Oya", "Başak", 3),
            new Futbolcu("Derya", "Başak", 4)
        ]);

        FutbolcuEkle = function () {
            Futbolcular.push(new Futbolcu(_Adi, _Soyadi, _Numarasi));
        }
    }

Yukarıdaki kod bloğunda “_Adi”, “_Soyadi” ve “_Numarasi” propertyleri oluşturulmuş ve bu propertylere bind edilmiş input elemanlarındaki değerler aktarılmıştır.

Bunun yanında butonumuz tıklandığı esnada çalışacak olan click attribute’una verdiğimiz “FutbolcuEkle” isimli fonksiyonuda oluşturdum.”FutbolcuEkle” bizim oluşturmuş olduğumuz eventtır ve gördüğünüz gibi KnockoutJS mimarisinde bu şekilde eventları yaratabiliyoruz.

Oluşturduğumuz “FutbolcuEkle” eventı tetiklendiğinde, inputlara bind edilmiş propertylerimizden alınan değerler bir “Futbolcu” nesnesi üretilerek gerekli yerlere yazılmış ve bu nesne “Futbolcular” dizisine eklenmiştir.

Bu işlemler neticesinde inputlara girilen değerler eşliğinde butona tıklandığında ilgili nesne oluşturuluyor ve diziye ekleniyor.Bunuda aşağıdaki videoda da gördüğünüz gibi listeleme sonucunda dinamik bir şekilde görebiliyoruz.

Bu yazımızında sonuna gelmiş bulunmaktayız.

Hepinize iyi çalışmalar dilerim…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*