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