Basit Örneklerle KnockoutJS'ye Başlangıç Anlatımı

KnockoutJS kütüphanesini kullanmaya nasıl karar verdiğimi önceki yazımda yazmıştım. Bu defa basit örneklerle kullanımını anlatacağım.

Önceki yazıyı uzun bulanlar için KnockoutJS’nin ne yaptığına dair bir özet geçeyim: Tıpkı jQuery gibi bir kütüphane. Kendi sitesinde UI ve json data arasındaki iletişimi kontrol eden MVVM’in VM’i olarak tanıtılmış.

Peki MVVM nedir? MVVM, tıpkı MVC gibi bir yazılım mimarisi pattern’i. Gelin bu kısaltmadaki harflerin anlamına bakalım:

mvvm çalışma prensibi
Bulabildiğim en güzel MVVM'in çalışma prensibini anlatan görsel bu. Kaynak: Microsoft

Knockout’a hızlı giriş

İlk adım elbette js kütüphanesini sayfanıza eklemek. İlgili dosyaları KnockoutJS sitesinden alabilirsiniz. Bower kullananlar aşağıdaki komut ile son sürümü indirebilir:

bower install knockout

Ardından:

Kolay görünüyor, değil mi? KnockoutJS dökümentasyonunda yer alan bir örnekle başlayalım. JS Objemizde kişi bilgileri yer alsın:

var myViewModel = {
    personName: 'Tufan',
    personAge: 26
};

Şimdi UI’da bu datayı göstereceğimiz yeri Knockout’a bildirelim. Bunun için HTML etiketimize data-bind parametresi ile Knockout komutu ekleyeceğiz:

<p>Benim adım <span data-bind="text: personName"></span></p>

Şimdi de JS tarafına geri dönelim ve KnockoutJS’yi çalıştıralım:

ko.applyBindings(myViewModel);

ko.applyBindings komutu ile belirttiğimiz viewModel objesini sayfadaki data-bind parametrelerine bağlamış olduk.

Bu basit örneğin kodlarını codepen.io'daki hesabıma ekledim, buradan inceleyip üzerinde oynayabilirsiniz.

Şimdi biraz da KnockoutJS’nin sihrine bakalım.

Observable kullanımı

Observable değişkenler KnockoutJS için özel yeteneklere sahip. En önemli iki özelliği:

  1. Bağlılık takibi (dependency tracking) özelliğine sahip olması
  2. View-model'daki değişiklikleri UI’a yansıtması ve UI'dakileri view-model'a taşıması (two-way binding)

Observable tanımlamak oldukça kolay. Bir önceki örneğimizden devam edelim:

var myViewModel = {
    personName: ko.observable('Tufan'),
    personAge: ko.observable(26)
};

personName ve personAge property’leri burada observable oldu. Fonksiyon parametresi olarak verdiğimiz değerler de varsayılan değer olarak set etmiş olduk. Değerleri js içinde okumak istersek şu şekilde okuyabiliriz:

var isim = myViewModel.personName(); //isim değişkenine Tufan datası set edilir

Yeni bir isim atamak için:

myViewModel.personName("Ahmet");

Biz yeni ismi set eder etmez UI'da ilgili alan güncellenecek ve 'Benim adım Ahmet' yazacaktır.

Eğer bir dizi tanımlayacak olursak, bunu ObservableArray ile yaparız. ObservableArray'ler tıpkı Observable gibi çalışır, sadece ekstra fonksiyonlara sahiptir. JS array'lerin pop, shift gibi özel fonksiyonlarına sahiptir. Şu şekilde tanımlanır:

myviewModel.personHobbies = ko.observableArray(["kitap okumak", "film izlemek", "blog yazmak"]);

Subscribe özelliği

Subscribe, observable tanımlı datalarda benim en sık kullandığım özellik. Bir datada değişiklik olması durumunda çalışacak işlemleri belirtir. Örnek bir subscribe yazımı:

myViewModel.personName.subscribe(function(newValue) {
    alert("Yeni kişi adı: " + newValue);
});

Subscribe fonksiyonu personName değişkenindeki değişikliği yakalıyor ve alert ile ekranda gösteriyor.

Son olarak

Yazıda HTML'e sadece text binding seçeneğini gösterdim. Çok daha çeşitli binding fonksiyonlarını dokümentasyonda inceleyebilirsiniz.

Ayrıca, observable ve subscribe özelliğini de kullanan bir form örneği hazırlayıp codepen’e ekledim. Kodları inceleyip siz de ilk örneğinizi yapabilirsiniz.

comments powered by Disqus