Knockout.js teknolojisi nedir, Knockoutjs ne işe yarar?

Knockout.js teknolojisi nedir, Knockoutjs ne işe yarar?

Web sitesi tasarımıyla uğraşan kişiler javascript kodlarıyla html kodlarının iç içe geçmesinden dolayı yaşanan karışıklığı sıklıkla yaşamışlardır.

Örneğin aşağıda verilen üç adet input elemanını düşünelim. İlk iki elamanın içeriğinin toplamı üçüncü elemanın içeriğine yazılacak olsun.

HTML Sayfası

Sayı 1:
Sayı 2:
Toplam:

Böyle bir durumda genelde seçilen çözüm aşağıda verilmiştir:

HTML Sayfası

Sayı 1:
Sayı 2:
Toplam:

Javascript Sayfası (jQuery)

function topla()
{
     $('toplam').val( $('sayi1').val() + $('sayi2').val() );
}

Bu çözüm genel olarak işimizi çözmesine rağmen proje büyümeye başladığında işimizi oldukça zorlaştırabilir. Örneğin sayi1 input'unun değeri değiştiğinde başka işler de yapmak istediğimizde kendimizi bir anda aşağıdaki gibi bir kodla karşı karşıya bulabiliriz:

HTML Sayfası

Sayı 1:

Bu tarz bir tasarımın en kötü tarafı, projemizdeki html kısmıyla uğraşan arkadaşların javascript kısmına da hakim olması gerekmektedir. Bir diğer ifadeyle, modelleme mantığıyla tasarım mantığını iç içe kullanmış olduk.

Büyük ve karmaşık projeler için daha iyi bir çözüm

Oluşan bu karmaşıklığı azaltmakla birlikte modelleme ve tasarım mantığını ayırmak için genel olarak aşağıdaki çözümü kullanabiliriz:

Alternatif HTML Sayfası

Sayı 1:
Sayı 2:
Toplam:

Alternatif Javascript Sayfası (jQuery)

function sayi1_degisti()
{
     topla();
}

function sayi2_degisti()
{
     topla();
}

function topla()
{
     $('toplam').val( $('sayi1').val() + $('sayi2').val() );
}

Buradan da göreceğiniz üzere, artık html tasarımcısının javascript tarafını çok daha az bilerek çalışmasını sağlamış olduk. Artık eklenecek yeni fonksiyonlar için, html tarafında herhangi bir güncellemye gerek kalmamış olup gerekli güncellemeler sadece javascript dosyasını kullanarak yapılabilir.

function sayi1_degisti()
{
     topla();
     cikar();
     carp();
     bol();
}

Knockout.Js Çözümü

Knockoutjs kütüphanesi, yukarıda verilen problemi daha gelişmiş programlama dillerinde alışık olduğumuz veri-bağlama yöntemlerini kullanarak çözmemizi sağlamaktadır. Örnek üzerinde açıklamak gerekirse:

Knockout.js HTML Sayfası

Sayı 1:
Sayı 2:
Toplam:

Knockout.js Javascript Sayfası (jQuery)

var ViewModel = function(x, y) {
this.sayi1 = ko.observable(x);
this.sayi2 = ko.observable(y);

this.toplam = ko.computed(function() {
     return this.sayi1() + " " + this.sayi2();
     }, this);
};

ko.applyBindings(new ViewModel(5, 5));

Farklı çözüm seçenekleri yukarıda ve seçim sizin. Kolay gelsin!

Not: Daha karmaşık örnekleri incelemek için Knockoutjs Örnekleri sayfasından yararlanabilirsiniz.
Referans: Knockoutjs.Com


10 yıl 2 ay önce eklendi

Uzun vadeli siyaset oyunları hakkında... 5 Temmuz 93… Başbağlar Cemaat abilerinden Fethullah Gülen'e Açık Mektup Bireysel Emeklilik Sistemi ve %25 Devlet Katkısı Hükümet, Başbakan, Cumhurbaşkanı hakkında yalan haberler, manipülasyonlar Dingoların bilim dünyasından acıklı haberler Knockout.js teknolojisi nedir, Knockoutjs ne işe yarar? Bulgaristan'da İsrailli turistleri taşıyan otobüste patlama: 7 ölü ABD'de beyazlar 'azınlığa düşüyor' Bulgar devine Türk talip 2.5 milyar dolarlık robot! Yunanistan'ın AB'ye alınması siyasi karardı! Bulgaristan'ın ilk Müslüman cumhurbaşkanı adayı Gül'ün Türkçe ısrarı Bulgarları kızdırdı İngiltere'de 18 yaşın altındakiler için Porno yasaklanıyor! Türkiye Cumhuriyeti tarafından Bulgaristan'daki öğrencilere verilen yükseköğretim bursları Bulgaristan'da caminin sesi kısıldı M. Ali Birand'tan darbecilik özeleştirisi Japonya ve Enerji: Peki Ya Alternatifi Ne? Dolar neden sürekli yükseliyor, dolar konusunda ne hata yapıyoruz?
1
2
3
4
5
6
7
8