KnockoutJS Nedir? Ne Amaçla, Nasıl Kullanılır?

Bu yazımızda web sayfalarında kaynak kodları oldukça sade ve anlaşılır bir yapıda dizayn etmemizi sağlayan bir JavaScript kütüphanesinden bahsedeceğiz.

Hemen başlayalım..

KnockoutJS Nedir?
MVVM(Model View ViewModel) Presentation Model mimarisi temelinde tasarlanan bir JavaScript kütüphanesidir.

Hemen MVVM’in ne olduğuna değinmek gerekirse aşağıdaki şablonla izah edebilirim.

Yukarıdaki şablondan da görüldüğü gibi, biz yazılımcıları aynı kodları yazmaktan kaçındıran, üç katmanında birbiriyle ayrı olarak etkileşim kurduğu, projenin ölçeklenebilmesi açısından faydalı bir tasarım desenidir diyebiliriz.

Bu tasarım deseni sayesinde, büyük projelerde değişiklikler ya da güncellemelerde olabilecek tüm zahmet ve yıkımlardan arındırılmış olunmaktadır.Doğrudan kolayca bir şeyleri değiştirmeye imkan tanımaktadır.

Bu tasarım deseni teknik olarak, View’ın Modeli bilmesinin gerekliliğini ortadan kaldırdığı gibi, arayüz yapan kişinin de arka tarafta nasıl bir iş geliştirildiğini bilmeden bağımsız olarak çalışmasını sağlar.

Yukarıdaki şeymayı tekrardan ele alırsak eğer,

• View, verinin(data) sunulduğu katmandır.
• ViewModel, Model ile View arasında etkileşim kuran, birnevi birbirine bağlayan(Binding) katmanıdır.
• Model ise, uygulama içerisinde kullanacağımız veri(data)dır.

 

Şemadan da anlaşıldığı üzere; View, ViewModel sayesinde Model katmanına erişmekte ve kullanıcı talebine cevap vermektedir.

Her ne kadar ben haklarında bir bilgi bilmesemde Silverlight ve WPF mimarileride bu deseni kullanmaktadır.

KnockoutJS Ne Amaçla Kullanılır?
Aslında bu sorunun cevabı şudur demek yanlış olacaktır.Lakin yazımızın başında da belirttiğim üzere kaynak kodlarda sade ve anlaşılır bir yapı kullanmak, kullanıcı etkileşimini arttırmak, karmaşıklığı ve kod kalabalığını azaltmak esas amaç edinildiğinden dolayı tercih edebilirsiniz.

KnockoutJS Nasıl Kullanılır?
Bu yazımızda KnockoutJS’ye prosedürel olarak temelden gireceğiz ve mimarisel yapıyı kodlar üzerinden tanıtırken, hem nasıl kullanıdığına hem de kullanırken nelere ihtiyacımız olduğuna değinmiş olacağız.

Öncelikle KnockoutJS kütüphanesini projemizde kullanabilmemiz için aşağıdaki dosyaları ilgili projeye import etmemiz gerekmektedir.

JQuery
KnockoutJS

Dikkat!!!
Yukarıda vemriş olduğum dosyalar bu yazının yayınlandığı tarihteki son sürümüdür.İlgili dosyaların zamanla güncellenmiş sürümleri yayınlanmış olabilir.O yüzden bu uyarıyı baz alarak çalışmalarınızı güncel versiyonlarda gerçekleştirmeye dikkat ediniz.

Projeye import edilen dosyaları aşağıdaki gibi projeye eklemeliyiz.

    <script src="~/Scripts/jquery-2.1.4.min.js"></script>
    <script src="~/Scripts/knockout-3.3.0.js"></script>

Şimdi KnockoutJS kütüphanesinin MVVM mimarisine uyarlanmış bir yapı oluşturalım.

Öncelikle “V:View” katmanını oluşturalım.

<table>
    <tr>
        <td>Ad</td>
        <td><input data-bind="value: Ad" /></td>
        <td data-bind="text: Ad"></td>
    </tr>
    <tr>
        <td>Soyad</td>
        <td><input data-bind="value: Soyad" /></td>
        <td data-bind="text: Soyad"></td>
    </tr>
    <tr>
        <td>Memleket</td>
        <td><input data-bind="value: Memleket" /></td>
        <td data-bind="text: Memleket"></td>
    </tr>
    <tr>
        <td>Yaş</td>
        <td><input data-bind="value: Yas" /></td>
        <td data-bind="text: Yas"></td>
    </tr>
    <tr>
        <td>Tam Bilgi</td>
        <td colspan="2" data-bind="text: TamBilgi"></td>
    </tr>
</table>

Yukarıdaki View yapısını incelerseniz eğer, kullanıcıya bir verinin sunulduğu katmanı örneklendirmekteyiz.Dikkat ederseniz eğer, <input> elemanlarında “data-bind” objecti kullanılmıştır.Bu object ile nesneleri birbirine bağlıyoruz.Yani Bind ediyoruz.

Örnek olarak Ad bölümünü ele alırsak eğer, input elemanındaki “data-bind=”value: Ad”” ile td deki “data-bind=”text: Ad”” dataların birbirine bağlıyoruz.Buradaki kullanımda verilen “Ad” değişkeni ViewModel’de ki(yani Datadaki) “Ad” özelliğinin karşılığıdır.

View katmanında yaptığımız bu işlemler neticesinde artık ViewModel katmanımızı dizayn edebiliriz.

<script type="text/javascript">
    function ViewModel() {
        Ad = ko.observable("Gençay"),
        Soyad = ko.observable("Yıldız"),
        Memleket = ko.observable("Artvin/Arhavi"),
        Yas = ko.observable(23),
        TamBilgi = ko.computed(function () { return this.Ad() + " " + this.Soyad() + " - " + this.Memleket() + " - " + this.Yas() })
    };
</script>

Yukarı oluşturmuş olduğumuz ViewModel yapısını incelerseniz eğer property değerleri(Ad, Soyad, Memleket, Yas, TamBilgi) sanki Modelden çekilmiş gibi direkt olarak atanmıştır.Burada propertylerin Bind edildiği nesnelere datayı vermesi içi “observable” komutunu kullanıyoruz.Bu komut sayesinde veriler Bind edilen nesnelere yollanacaktır.Bu örneğimizde “observable” metoduna verdiğimiz veriler Bind edilen alanlara otomatik olarak atanacaktır.

TamBilgi propertysi için, hesap komutu olan “Computed” kullanılmaktadır.”Ad”, “Soyad”, “Memleket” ve “Yas”
birleştirilmiştir.Aslında TamBilgi, “Ad”, “Soyad”, “Memleket” ve “Yas” propertylerine bağlanmıştır.Yani herhangi birinde oluşacak değişiklik TamBilgi propertysinide direkt olarak etkileyecektir.

input elemanlarında yapılan değişiklikler bind edildikleri alanlara da otomatik yansıyacaktır.

Son olarak, oluşturduğumuz bu yapıyı sağlıklı bir biçimde kullanabilmek için ViewModel’imizi Knockout Objesine Bind etmemiz gerekmektedir.

<script type="text/javascript">
    $(document).ready(function () {
        ko.applyBindings(ViewModel());
    });
</script>

Yapmış olduğumuz bu işlemler neticesinde aşağıdaki ekran görüntülerinden projenin nasıl çalıştığı hakkında görsel fikriniz oluşacaktır.

Evet arkadaşlar, bu yazımızında sonuna gelmiş bulunmaktayız.Zamanla KnockoutJS üzerinde derinlemesine yazılar yazacağım.Şimdilik burada giriş niteliğinde bırakalım.

Bol bol faydalanmanız dileğiyle…

İyi çalışmalar dilerim…

Kaynak : http://www.borakasmer.com/knockoutjsi-derinlemesine-inceleme/