• Anasayfa
  • Eğitimler
    • JavaScript Eğitimi
    • Angular 2 Eğitimi
    • React.js Eğitimi
    • Java 8 Eğitimi
    • Java EE 7 Eğitimi
    • Spring Framework Eğitimi
    • Git Eğitimi
  • Online Eğitimler
    • Online React.js Eğitimi
    • Online Angular 2 Eğitimi
    • Online Spring Boot Eğitimi
  • Referanslar
  • Hakkında
  • İletişim
KodEdu
  • Anasayfa
  • Eğitimler
    • JavaScript Eğitimi
    • Angular 2 Eğitimi
    • React.js Eğitimi
    • Java 8 Eğitimi
    • Java EE 7 Eğitimi
    • Spring Framework Eğitimi
    • Git Eğitimi
  • Online Eğitimler
    • Online React.js Eğitimi
    • Online Angular 2 Eğitimi
    • Online Spring Boot Eğitimi
  • Referanslar
  • Hakkında
  • İletişim

Knockout.js – Hesap Makinesi Örneği

  • Posted by Rahman Usta
  • Categories Genel, Uncategorized, Yazılar
  • Date 2 Şubat 2013

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.

KO

Ş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

  • Share:
author avatar
Rahman Usta

Kodedu.com bünyesinde eğitim ve danışmanlık faaliyetleri sürdüren Rahman Usta, 2012 yılında yayına çıkan popülerJava Mimarisiyle Kurumsal Çözümler ve 2014 yılında yayınlanan Java 8 Ebook kitaplarının yazarıdır. Açık kaynak dünyasına katkı veren yazar, geliştirdiği AsciidocFX projesiyle Duke's Choice Award 2015 ödülünü kazanmıştır. Rahman ayrıca, Istanbul JUG'un ve Java standartlarını geliştiren JCP (Java Community Process)'in bir üyesidir. 2018 yılında Java Şampiyonu olarak seçilmiştir.

Previous post

JaxRS 2.0 Rest Client, Spring MVC, Hibernate ve JavaFX 2
2 Şubat 2013

Next post

Mustache - Template Kullanımı
8 Şubat 2013

You may also like

api-logo
Swagger Nedir? Neden kullanılır?
10 Ekim, 2018
spring-cli-logo
Spring CLI ile Spring Boot Projeleri Hazırlamak
21 Ağustos, 2017
eureka_architecture
Spring Cloud Netflix ve Eureka Service Discovery
3 Temmuz, 2017

Leave A Reply Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

E-posta listesine kayıt olun!






Gözde yazılar

Performans, Yük ve Stres Testleri
26Ağu2012
CDI – @Produces, @New ve @PostConstruct Notasyonları
22Tem2013
Java EE 8 ile yeni MVC Framework geliyor
03Eyl2014
Webiner : Java 8 | Project Lambda
07Ara2012

Son Yazılar

  • Java’da Record’lar 27 Ocak 2020
  • Swagger Nedir? Neden kullanılır? 10 Ekim 2018
  • Spring CLI ile Spring Boot Projeleri Hazırlamak 21 Ağustos 2017
  • Spring Cloud Netflix ve Eureka Service Discovery 3 Temmuz 2017
  • Online React.js Eğitimi ardından (15-25 Mayıs 2017) 31 Mayıs 2017

Son Yorumlar

  • YAML Nedir? Neden YAML Kullanmalıyız? için shahriyar
  • Java Persistence API Nedir? (Giriş) için Utku
  • Java 8 – CompletableFuture ile Asenkron Programlama için Rahman Usta
  • Java 8 – CompletableFuture ile Asenkron Programlama için burak
  • Arm7 Nxp 2104 işlemci ile basit bir Uygulama için Mustafa Dinc

Get Java Software

Arşivler

Bizi takip edin

React.js Eğitimi Başlıyor
11-22 Eylül, 2017
Eğitmen
Rahman Usta
İletişim

merhaba@kodedu.com

  • Hakkında
  • Gizlilik Politikası
  • İletişim
  • Referanslar
Kodedu Bilişim Danışmanlık
Cemil Meriç mah. Çelebi sok.
No:16/3 Ümraniye/İSTANBUL
Tel: 0850 885 38 65
Alemdağ V.D.: 8960484815

KODEDU © Tüm hakları saklıdır.