JavaScript ve Knockout.js ile MVVM


22 Nisan 2012     Etiketler: Knockout.js JavaScript MVVM JSON

Knockout.js nedir ve web ortamında nasıl dinamik arayüz geliştirmede kullanılır, basit ama çalışan örneklerle inceleyelim.


Web ortamında özellikle HTML ve JavaScript ile yazılım geliştiren arkadaşlar iyi bilirler. Sayfa tasarımı karmaşıklaştıkça ve işlem gören veri miktarı arttıkça şu gibi zoluklar kendini gösterir:

  • spagetti kod denilen karmaşık ve başkası tarafından anlaşılması zor kodlama
  • ve görsel elementler arasındaki bağımlılıklar (yani değişikliklerin sayfaki diğer elemanlar üzerindeki etkileri)
  • İkinci noktayı bir örnekle açıklayalım. Bir butonun aktif olup olmamasının başka bir textboxun dolu olmasına bağlı olması gibi.

    Knockout.js bu problemlere bir çözüm olması adına bir Microsoft çalışanı olan Steve Sanderson tarafından JavaScript ve Model-View-ViewModel (MVVM) tasarım deseni kullanılarak, açık-kaynak (open-source) olarak yazılım dünyasına sunulmuştur.

    Özetle şu özelliklere sahiptir:

  • Deklaratif Bağlama (Declarative bindings)
    HTML kodu içinde HTML elementin hangi veriyi göstereceğinin belirlenmesi. Mesela
    Soyad:  data-bind="value: Soyad" /> (input elementinin ne göstereceğinin programatik değil deklaratıf olarak bildirilmesi)
  • Otomatik arayüz güncellenmesi (Automatic UI refresh)
    Veri (yani Model) üzerindeki değişikliklerden kaynaklanan güncelleme gereksinimlerinin otomasyonu


  • Görsel elementler arasındaki bağımlılıkların takibi (Dependency tracking)

  • Gözlemlenebilirler (Observables)

  • Şablonlama (Templating)


  • Örneğimize geçmeden önce Knockout.js'i iyi anlamak için öncelikle ve özellikle anlaşılması gereken kavram Gözlemlenebilirler'in üstünde duralım. Aşağıdaki JSON objesini düşünelim:


    var hisseSenediViewModel = {
    ad: 'Test Tekstil',
    kod: 'TESTTEKS',
    fiyat: 5.32
    };

    Gayet basit olan bu nesne aşağıdaki Knockout.js şablonu ile ekrana şöyle yazdırılabilir:
    Hisse: data-bind="text: ad">

    Kod: data-bind="text: kod">

    Fiyat: data-bind="text: fiyat">

    (Yukardaki şablona verinin bağlanabilmesi için sayfamızın ko.applyBindings(hisseSenediViewModel); kodunu da çalıştırmamız lazım).

    Peki JSON olarak tuttuğumuz nesnenin tuttuğu veride, mesela fiyatta, bir değişiklik olsa, bunu ekrana yansıtmak için JavaScript kod yazıp programatik olarak güncellememiz gerekecek, işte bu noktada Knockout.js bu işi çok kolaylaştırıyor. Görsel HTML elementler ve veri arasındaki bağlantı aşağıdaki gibi dinamik bir yapıya bürünüyor:

    var hisseSenediViewModel = {
    ad: 'Test Tekstil',
    kod: 'TESTTEKS',
    fiyat: ko.observable(5.32)
    };

    ve şablonumuzda da aşağıdaki değişikliği yapmamız gerekiyor:
    Hisse: data-bind="text: ad">

    Kod: data-bind="text: kod">

    Fiyat: data-bind="text: fiyat()">

    Bu Knockout.js örnek sayfasını burda bulabilirsiniz.

    Bu özet girişten sonra şimdi başka bir örnek yardımıyla Knockout.js'in sağlayabileceği imkanları irdeleyelim.

    JSON olarak tuttuğumuz bir firma listesini HTML tabloya dökecek, en son satırı da yeni firma yaratma satırı olarak hazırlayacak basit bit HTML sayfası hazırlayalım.

    İşe JavaScript'ten yani Model ve ViewModel'dan başlayalım.

    Model
    Örneğimizi basit tutmak adına iki alanı olan bir Firma modeli düşünelim, ID ve Ad.
    Firma
    model'imizi temsil edecek bir JavaScript yapısı yazabiliriz ama JSON kullanarak zaten Model nesnemizi rahatlıkla temsil edebileceğimiz için (
    { ID: 1, Ad: 'Firma A Ltd' }), bir Firma class'ı yaratmaya gerek yok.

    ViewModel
    ViewModel'imiz sayfamıza gerekli veriyi sağlayacak ve sayfa üzerindeki HTML elemetleri direkt olarak bağlayacağımız ünitemiz.
    <script>
    //ViewModelimizi temsil edecek bir JavaScript class yazalım.
    function FirmalarViewModel() {
    //firma listemizi gözlemlenebilir bir JSON dizisi olarak yaratıyoruz. Bur bir test olduğu için JSON'u direkt ellen yazıyoruz, ancak normalde bu veri sunucudan geliyor olurdu
    this.firmalar = ko.observableArray([{ ID: 1, Ad: 'Firma A Ltd' }, { ID: 2, Ad: 'Firma B A
    S' }, { ID: 3, Ad: 'Firma C Ltd'}]);
    //yeniFirma adını temsile değişkeni, o da gözlemlenebilir this.yeniFirma = ko.observable("");
    //yeni firmayı firmalar listesine ekleyecek fonksiyon this.firmaEkle = function () { ıf (this.yeniFirma != "") { var yeniID = this.firmalar()[this.firmalar().length - 1].ID + 1; this.firmalar.push({ ID: yeniID, Ad: this.yeniFirma() }); this.yeniFirma(""); } }.bind(this); }
    //ViewModeli Viewa (yani sayfaya) bağlayalım ko.applyBindings(new FirmalarViewModel());

    View
























    Firma İD Firma Ad  





     








    Toplam Firma:


    Bu örnek sayfa da burda bulunabilir.

    Bu basit örneğimizle de gözlemlenebilir dizileri ve farklı HTML elementleri arasında nasıl dinamik bağlantılar kurulabileceğini örnekledik. Dileriz faydalı bulursunuz.

    Ayrıca Knockout.js'in kendi sitesinde çok faydalı interaktif bir uygulama mevcut, İgilizce ama Knockout.js'i öğrenmenin en iyi yolu. http://learn.knockoutjs.com/

    Kaynak: Knockout.js sitesi




    Yorumlar


    karmaşık biraz ama ilginç, acaba bu kadar zahmete gerek var mı?
    Kadir @ 16.5.2012 19:16:05

    Başlangıçta karmaşık gelsede, düzenli bir model yapısına ve karmaşıklıktan kurtulmuş kodlara kavuşturuyor.
    Ersen @ 27.3.2013 13:57:58

    Sizin yorumunuz

    Email


    Adınız







    F5 Dergi © 2017