Knockout.js – Hesap Makinesi Örneği

Knockout.js, Javascript model nesneleriyle, HTML UI bileşenlerini sorunsuzca birleştiren, kullanımı kolay bir Javascript altyapısı. Knockout.js, UI bileşenlerindeki eylemleri sorunsuzca algılayabilir ve aynı zamanda model verilerindeki değişiklikleri, anlık olarak kendilerine adanmış HTML nesnelerine yansıtan önemli özellikler sunuyor.

Şimdi sizlerle kullanıcı etkileşimi ve geliştirim zevki yüksek, küçük bir Hesapmakinesi uygulamasının nasıl yapılabileceğinden bahsetmek istiyorum.

Adım 1

Bu adımda Hesapmakinesi uygulaması için HTML ağacı oluşturulur.

 

<table class="table">
<tr>
<td class="r">
<label class="label">Sayı 1:
<input data-bind="value: sayi1" type="text"/>
</label>
<label class="label">Sayı 2:
<input data-bind="value: sayi2" type="text"/>
</label>
<label>Sonuç: <span data-bind="text: hesaplanan"/></label>
</td>
<td class="y">
<label>
<input data-bind="checked: secili" type="radio" value="Toplama"> Toplama</label>
<label>
<input data-bind="checked: secili" type="radio" value="Çıkarma"> Çıkarma</label>
<label>
<input data-bind="checked: secili" type="radio" value="Çarpma"> Çarpma</label>
<label>
<input data-bind="checked: secili" type="radio" value="Bölme"> Bölme</label>
</td>
</tr>
</table>

Yukarıdaki HTML bileşenlerine dikkat kesildiğinde algılayış açısından farklılık arzeden data-bind niteliğidir. data-bind niteliği, Html elemanının herhangi bir nitelik bilgisini, Knockout tarafındaki bir nesneyle ilişkilendirmeye, KO nesnesine sıkı sıkıya bağlamaya yaramaktadır. Nesne üzerinde herhangi bir veri değişikliği gerçekleştiğinde, değişen değer, doğrudan HTML elemanının ilgili niteliğine yansıtılmaktadır.

Adım 2

KO ViewObject nesnesinin hazırlanması

 

var ViewModel = function () {
    this.sayi1 = ko.observable(15);
    this.sayi2 = ko.observable(20);
    this.secili = ko.observable("Toplama");
    this.hesaplanan = ko.computed(function () {
        var sonuc, s1, s2;
        s1 = parseInt(this.sayi1());
        s2 = parseInt(this.sayi2());

        if ("Çıkarma" === this.secili()) sonuc = s1 - s2;
        else if ("Çarpma" === this.secili()) sonuc = s1 * s2;
        else if ("Bölme" === this.secili()) sonuc = s1 / s2;
        else sonuc = s1 + s2;
        return sonuc;
    }, this);
};
ko.applyBindings(new ViewModel());

Yukarıdaki ViewModel isimli javascript nesnesi, HTML ağacında bulunan data-bind niteliğine ait Knockout değişkenlerine, KO’ya ait fonksiyonları bağlamaktadır. Örneğin sayi1 değişkenine bir ko.observable() fonksiyonunun bağlandığı görülebilir. ko.observable() fonksiyonu bir HTML elemanındaki veri alanını takip ederken, ko.computed(fn..) sonucu hesaplanabilir bir KO fonksiyonu olarak karşımıza çıkmaktadır.

Giriş niteliğindeki bu KO uygulamasını http://jsfiddle.net/rahmanusta/QReEr/ adresinden veya aşağı yer alan fiddle arayüzünden inceleyebilirsiniz.

[wp-js-fiddle url=”http://jsfiddle.net/rahmanusta/QReEr/” style=”width:105%;height:450px;border:solid #4173A0 1px;”]

Tekrar görüşmek dileğiyle