KnockoutJS, Steven Sanderson tarafından geliştirilmiş bir JavaScript kütüphanesidir. Bu kütüphane ile kullanıcı etkileşimini artırmak amaçlanmıştır. Knockout Modelleri kullanılarak oluşturulan Dinamik (özellikleri değişebilen) elemanlar gelişmiş bir etkileşim desteği sunuyorlar. Kütüphane MVVM kalıbını(pattern) uygulamaktadır.
MVVM(Model View ViewModel):
MVVM, Model, View ve ViewModel adında 3 yapıdan oluşmaktadır. Amaçları arasında arayüz yapan kişinin arka tarafta nasıl bir iş geliştirildiğini bilmeden işini yapabiliyor olması, daha çabuk genişlemeye müsait bir yapıyı ortaya çıkarması sayılabilir. Model, verileri temsil etmektedir. View kullanıcıya sunulan görüntü, ViewModel ise asıl işin geliştirildiği yapıdır. View’ın Model i bilmesine gerek yoktur. ViewModel aracılık yapmaktadır.
knockoutjs.com adresinden .js dosyasını indirebileceğiniz gibi cdn’leri de kullanabilirsiniz. Enson sürüm olan knockout-3.0.0.js ‘i Asp.net MVC projesinde kullanımını bakacak olursak.
Öncelikle boş bir MVC projesi açıyoruz.
Daha sonra “KnockoutJSController” adında bir controller ekliyoruz ve Index view’ini oluşturuyoruz. “RouteConfig” sınıfından Default olarak tanımladığımız “KnockoutJSController” controllerini ve “Index” view adını veriyoruz ki controller adı ve view adı verilmezse buralara yönlendirsin.
Projede knockout.js kullanabilmek için doğrudan indirilen dosya kullanılabileceği gibi “Nuget Package Manger” sayesinde de projeye eklenebilmektedir. “Install-Package knockoutjs” komutu ile projeye KnockoutJS i ekliyoruz.
Boş proje açtığımız için bundles ile ilgili bir ayar sınıfı gelmemiş fakat istenirse ayrıyeten de yazılabilir. Knockoutjs, <script> etiketleri kullanılarak da eklenebilir.
Örnek ViewModel:
|
function ornek1ViewModel() { isim = "said"; soyisim = "aydoğan"; } |
Örnek ViewModel yukardaki gibi tanımlanıp “ornek1Model.js” adında oluşturuldu. Bu bildiğimiz JavaScript fonksiyonu şeklindedir.
Bunu View’e aşağıdaki şekilde eklersek.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
|
@{ ViewBag.Title = "KnockoutJS Örneği"; } <style> p { font-family: 'Comic Sans MS'; font-style: oblique; } span { color: red; } </style> <script src="/Scripts/knockout-3.0.0.js"></script> <script src="/ViewModels/ornek1ViewModel.js"></script> <h2>KnockoutJS Örneği</h2> <p>İsim : <span data-bind="text: isim"></span></p> <p>Soyisim: <span data-bind="text: soyisim"></span></p> <script> ko.applyBindings(new ornek1ViewModel()); </script> |
Yukarıda görüldüğü üzere KnockoutJS ve ViewModel scriptleri harici olarak dahil edilmektedir. “<span>” elemanlarında ise “data-bind=” ve bunun eşitliğindeki “text:” dikkati çekmektedir. Bunlar knockout ‘un yönettiği parametler olarak karşımıza çıkıyor. Yani “data-bind” gördüğü zaman o elemanı viewmodel ile ilişkilendirmesi gerektiğini anlıyor. Eşitliğinde bulunan özellikleri ViewModel’a uygun şekilde isteneni gerçekleştiriyor.
Kısaca yukarda “text:isim” ile “data-bind” niteliği verilmiş elemanın “text” özelliğini ViewModel’de bulunan “isim” değişkeniyle oluşturmasını istiyoruz. Bunun sonucunda da aşağıdaki görüntüyü elde ederiz.
İsim ve soyisim değerini “input” elemanında göstermek istersek de “text” yerine “value” kullanılır.
Eğer değişkenleri “Observable” olarak tanımlarsak knockout bizim için bu değişkenleri izler ve değişiklik olduğunda aynen yansıtır. Bunu aşağıdaki örnekte görebiliriz.
ViewModel’i şu şekilde güncellersek:
|
function ornek1ViewModel() { isim = ko.observable("said"); soyisim = ko.observable("aydoğan"); tamisim = ko.computed(function () { return isim() + " " + soyisim(); }); } |
View’ı da şu şekilde güncellersek:
|
@{ ViewBag.Title = "KnockoutJS Örneği"; } <style> p { font-family: 'Comic Sans MS'; font-style: oblique; } span { color: red; } </style> <script src="/Scripts/knockout-3.0.0.js"> </script> <script src="/ViewModels/ornek1ViewModel.js"></script> <h2>KnockoutJS Örneği</h2> <h3>span gösterim</h3> <p>İsim : <span data-bind="text: isim "></span></p> <p>Soyisim: <span data-bind="text: soyisim"></span></p> <h3>İnput gösterimi</h3> <p>İsim : <input data-bind="value:isim, valueUpdate: 'afterkeydown'" /></p><p>Soyisim: <input data-bind="value:soyisim, valueUpdate: 'afterkeydown'" /></p> <p>Tam İsim: <span data-bind="text: tamisim "></span> </p> <script> ko.applyBindings(new ornek1ViewModel()); </script> |
Farklılık olarak “valueUpdate: ‘afterkeydown’ “ ve “computed” göze çarpanlar olarak karşımıza çıkıyor. “valueUpdate: ‘afterkeydown’” bizlere adında da anlaşılacağı üzere tuşa basıldıktan sonra ViewModel’a git ve ilgili değişkeni yeni değeriyle güncelle demektedir. Bu sayede aynı anda diğer ilişkili yerler de güncelleme gerçekleştirilecektir.
“computed” bir fonksiyon olarak karşımıza çıkmaktadır. Bu sayede ViewModel’da bulunan değişkenlerle ilgili işlemler gerçekleştirebiliriz. Üretilen bir değer olduğu için kullandığı değerler değiştiğinde otomatik olarak ilgili yeri güncellemektedir.
Uygulama görüntüsü:
Görüldüğü gibi aynı anda güncelleme gerçekleştirilebilmektedir.
Proje Dosyası: KnockoutJS-OrnekProje.rar (1,29 mb)