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

Knockout teknolojisiWeb 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


5 yıl 11 ay önce eklendi

EMO'nun Kalıcı Yaz Saati Uygulamasıyla ilgili olarak Tasarruf Değil İsraf Açıklamasına Tekzip Ev almak için biriktirilen paranın zekatı Bildiriye imza atan 1128 akademisyen hangi üniversitelerden Sözde Ermeni Soykırımı hakkında maddeler halinde bilmeniz gerekenler İstanbul'da ev almalı mıyım? Knockout.js teknolojisi nedir, Knockoutjs ne işe yarar? Göçmen denilenler aslında kimler? 300 yıllık problemi 16 yaşındaki genç çözdü Radyasyon: Dalga dalga ölüyoruz! "Tanrı Parçacığı"nın peşinde: Büyük gün yaklaştı Bu kelimenin Türkçesi var, onu kullanın Boraltan Köprüsü Katliamı, Dramı, Gerçekleri Çocuksuzluk şampiyonu Almanya'da okullar öğrencisiz kalabilir Bulgaristan vatandaşlarına Türkiye'den vatandaşlık fırsatı 2011 seçimi, eğitim seviyesi ile parti oyları arasındaki bağlantı Türkiye'nin dış borcu ve güncel bir analiz Bir zamanlar: İsrail'le "alçak koltuk" krizi olmuştu Bilimsel makale yazma kılavuzu Japonya ve Enerji: Peki Ya Alternatifi Ne? Beş milyon müslümanın göç haritası
1
2
3
4
5
6
7