KnockoutJS’i Derinlemesine İnceleme

Javascript Frameworkleri arasından en beğendiğim olan KnockoutJS ile kullanıcı etkileşimini arttırmak; kapsamlı ekranlarda, karmaşıklığı ve kod kalabalığını azaltmak esas amaç edinilmiştir. Bu şekilde model ve tasarım mantığı da birbirinden ayrılmış olur. KnockoutJS’de MVVM Presentation Model mimarisi kullanılmaktadır. WPF ve Silverlight teknolojileri için de ayni mimari kullanılmaktadır. Bu teknoloji view’ın, modeli bilmesinin gerekliliğini  ortadan kaldırığı gibi, arayüzü yapan kişinin de arka tarafta nasl bir iş geliştirildiğini bilmeden bağımsız olarak çalışmasını sağlar. Bunların yanında arka taraftaki geliştirici için de genişletilebilir,bakım yapılabilir ve test edilebilir bir yapıya izin vermektedir.

mvvm

Image Source : https://www.codeproject.com/KB/Articles/1070289/Knipsel1.PNG

M:Model yani uygulama içerisinde kullanacağımız data.V:View datanın sunulduğu katman VM:ViewModel Model ile view’ı bağlayan(Binding) yapıdır.View, ViewModel sayesinde model’e erişir ve kullanıcı etkileşimine cevap verir. Sayfamıza öncelikle alttaki JS dosyalarımızı ekliyoruz.Yani knockout ve jquery.

1. Öncelikle adımızı, soyadımızı ve tam adımızı yazan 3 alanı aşşağıda görüldüğü gibi oluşturalım.

Fark ettiğiseniz data-bind=”text: firstName” diye bir objectimiz var.Binding data, nesnenin text’ine bağlandı.Datada ki karşılığı firstName’dir.Kısaca data ile nesneleri birbirne bağladık(Bind) ettik. Şimdi aşşağıda görüldüğü gibi data’ya bakalım.Yani ViewModel’e:

Yukarıda görüldüğü üzere property değerleri yani firstName ve lastName sanki datadan çekilmiş gibi direk atandı.Komut Observable’dırfullName için Computed yani hesap komutu kullanıldı.Ad ve Soyad birleştirildi.Aslında fullName  ==>firstName  ve lastName’e bağlandı. Artık herhangi birinde oluşacak değişiklik fullName ‘i de direk etkileyecek ve onu da değiştirecektir. Bizim fullName için ayrıca bir işlem yapmamıza gerek kalmayacaktır. Buna bağlı <span>’ lar da bind yolu ile otomatik olarak değişecektir. Aşşağıda konu ile ilgili ekran çıktısı görülmektedir. First Name değişmiştir ve bundan etkilenen Full Name’de buna bağlı olarak değişmiştir.

knocout1

Ayrıca yukarıdaki kodda görüldüğü üzere viewModel’imizi knockout Objesine Bind etmeyi unutmuyoruz. ko.applyBindings.

2.Şimdi modelimize aşşağıda görüldüğü gibi arkadaşlarımızı ekleyelim, tabi view’ımızada. Firend’de kendi basına bir modeldir.Ve ViewModelimize array bir dizi olarak eklenecektir.observableArray bu işe yaramaktadır.

View’ımız da aşşağıda görüldüğü gibi KnockOut Template yapısını kullanacağız. En üstten toplam arkadaş sayısını yazdık.friends dataları içinde gezilerek ilgili şablon dolduruldu.

Yukarıda görüldüğü gibi template name ile script name’i aynı olması geremektedir.

3.Şimdi aşşağıda görüldüğü gibi arkadaşlarımızın twitter’ı var mı. Var ise adının girilmesini sağlıyalım. Ayrıca listemize yeni arkadaş ekliyip,çıkarma gibi eventleri yani addFriend, removeFriend ve friend model’e de isOnTwitter ve twitterName şeklinde iki property ekliyelim.

Aşşağıda görüldüğü gibi ViewModel’imize üç property ekledik. Bunlardan notTweeterUser  property iken addFirend ve removeFriend ise belli bir event’de çağrılacak olan functionlardır.

Yukarıda görüldüğü gibi notTweeterUser ‘da ko.utils altındaki arrayFilter kullanılarak friends modelindeki isOnTwitter==false olanlar alınmıştır. Tam isimde olduğu gibi ko.computed() function’ı içinde bu filitreleme işlemi yapılmaktadır.

Yukardaki kodun içindeki bu önemli küçük kod parçası aşşağıda ayrıca gösterilmiştir.

addFriend’de default olarak Anaother isimli twitter’ı olmayan bir friend eklenecektir. View’ımızı da alttaki gibi oluşturalım. knock2

Admız,Soyadımız,Tam isim

Yukarıda görüldüğü gibi tweeter’ı olmayan arkadaş sayısı(notTweeterUser().length).Dikkat!!:Function’ı çağrırken () parantezleri unutmayalım. friendTemplate’e removeFriend şeklinde bir button getirilmiştir. Click event’i removeFriend functionını çağrır. Checkbox nesnesinin checked propertysine isOnTwitter bağlanmıştır. twitterName‘de koşul vardır. Knockout’da koşul mantığı çok kullanışlıdır.Yukarıdaki koddan alınmış bu küçük kod parçacığıda aşşağıdaki gibi visible: isOnTwitter koşulu alkışı hak etmektedir.

Gene Add Friend Buttonunda da koşul vardır.Toplam arkadaş sayısı 5’den fazla ise tıklanamıyacaktır. Yukarıdaki koddan alınmış bu küçük kod parçacığıda aşşağıdaki gibidir.

Şimdi genel resme bir bakalım.Tüm kontroller birbirlerine bağlıdır.

  • AddFriend butonuna basılnca viewModel’deki friends’e aşşağıdaki gibi bir friend eklenecektir.
  •  friends’e bakan template yeni firend’i Anaother ismi ile ve isOnTwitter false olduğu için twitter ismi gelmeyen kaldır butonu ile yeni bir kayıdı otomatik olarak ekler. İlgili kod parçacığı aşşağıdadır.
  •  Buna bağlı olarak toplam arkadaş sayısı ve twitterı olmayan arkadaş sayıları bir artar. İlgili kod parçacığı yine aşşağıdadır.
  • Artan yeni firends sayısı 5’e çıkmış ise  AddFriend buttonunun enable’ı false olur.İlgili kod parçacığı aşşağıdadır.
  • domino   friend

Görüldüğü üzere tüm view birbirine bağlıdır. Ve bir alandaki değişiklik hiç kod yazmadan tüm yapıyı domino taşı gibi tetiklemektedir. Şimdi gelelim kaydetme işlemine: Kaydetme işlemini AjaxPost ile  JSON data göndererek yapıcaz. Demek ilk ihtiyacımız olan veriyi json tipine çevirmek. Viewda tablomuzun başına alttaki kodu koyalım:

Bir Textarea içine knockout function’ı olan toJSON()’u kullandık.firends modelimizin tamamını bu textarea içine json olarak dynamic şekilde gömüyoruz. Bu demek oluyor ki yeni bir arkadaş eklediğimizde textarea içindeki json text değişecek.isOnTwitter CheckBox’ı tıklanınca firends json değişecek. Buna bağlı  twitterName gözükecek.İlgili kod parçacığı aşşağıdadır.

Aşşağıdaki ekran çıktısında görüldüğü gibi ismi doldurduğumuz takdirde friend json anlık olarak değişecek.Ve biz herhangi bir emek harcayıp kod yazmadan, gönderilecek datayı textarea içinden post edebilecez. bigpicture

Şimdi sırada bu dataya uygun Modelmizi oluşturmakta. İlgili kod aşşağıdadır.

Controller tarafındaki kodumuz yine aşşağıda görüldüğü gibidir.

Yukarıda görüldüğü üzere json’l gönderdiğimiz data property bazında friend classımızla eşleşmektedir. Textarea’da array dizisi olarak friendler codebase’de List<Friend>()’e denk gelmektedir. Yine dönüş tipimiz JsonResult’dır. Toplam arkadaş sayısı ve Twitter’ı olan arkadaş sayısı gönderilmektedir. Client Tarafındaki Save function’ı aşşağıda görüldüğü gibi gene viewModel’e function olarak bağlanmıştır. data:ko.toJSON(friends) textarea’daki textin ta kendisidir. success durumunda dönen mesaj aşşağıda görüldüğü gibi yazdırılır.

result

 

Görüldüğü üzere knockoutJS komplike ve kullanıcı etkileşiminin çok olduğu sayfalarda büyük kolaylık sağlamaktadır.Kod kalabalığını minimuma indirmesinin yanında, ileride yapılabilecek değişiklik veya eklentilere karşı çok hızlı cevap vermemize olanak sağlamaktadır.

Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere herkese hoşçakalın.

Not:Örnek Url (İptal): http://knockoutfriendlist.azurewebsites.net/

Source Code: http://www.borakasmer.com/projects/KnockoutSteveSanderson.rar

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

6 Cevaplar

  1. Yusuf Akdoğan dedi ki:

    Güzel makale, teşekkürler :)

  2. Dogus dedi ki:

    Cok guzel bir yazi, ellerine saglik

  3. Cem EFENDİOĞLU dedi ki:

    Oldukça faydalı, açıklayıcı ve güzel bir makale olmuş.

    Emeğine sağlık, teşekkürler.

  4. erhan dedi ki:

    Yeni başlayanlar için faydalı bir makale olmuş.
    Eline sağlık

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.