Knockout JS Nedir

Knockout js bize zengin ve etkileşimli kullanıcı arayüzleri oluşturma imkanı veren bir javascript kütüphanesi.Dinamik olarak değişen arayüz bileşenleriniz mevcutsa kullanım ve geliştirme kolaylığı ile öne çıkan bir kütüphane.

Binding mekanizması ve observable (gözlenebilirlik) yapısı sayesinde otomatik güncelleme yapabilmemize imkan sağlayan bir yapı.

Basitleştirilmiş bir şekilde geliştirme mimarisini ele almamız gerekirse MVVM(Model-View-ViewModel) dizayn modelini kullanarak geliştirme yapıyoruz. Html ile geliştirdiğimiz view, javascript tarafında ele aldığımız View Model yapısı dinamikliği sağlayan katmanlarımız.

ViewModel yapısı modelimizi ve bu modelin ne gibi özelliklere sahip olduğu bilgisini içeren javascript kodu.
Örnek vermek gerekirse;
ViewModel(Javascript)

function AppViewModel() {
this.adi= "Ertuğrul";
this.soyadi= "Taş";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

View (html)
<p>Adi: <strong data-bind="text: adi"></strong></p>
<p>Soyadi: <strong data-bind="text: soyadi"></strong></p>

olarak tanımladığımız sayfamızı çalıştırdığımızda model de tanımlanan adı ve soyadı alanlarını
view katmanında data-bind”text” ifadesi ile view katmanına bağlıyoruz.

Peki bu yapı bize ne kazandıracak tanımladığımız model içinde yer alan özellikleri
observable hale getirerek model de yapılan değişikliğin tüm referanslarda etkili olmasını sağlayabiliriz.

Yukarıda verdiğimiz örneği geliştirelim, adı ve soyadı alanlarını input olarak alalım değişen değerlerin
sayfa içerisindeki diğer referanslara yansımasını gözlemleyelim. Bunun için ViewModel içerisinde adi ve soyadi
özelliklerini observable yapalım.

function AppViewModel() {
this.adi= "Ertuğrul";
this.soyadi= "Taş";
this.adi= ko.observable("Ertuğrul");
this.soyadi= ko.observable("Taş");
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

Html sayfamıza da ilgili input bileşenlerini ekleyelim

<p>Adi: <input data-bind="value: adi" /></p>
<p>Soyadi: <input data-bind="value: soyadi" /></p>
<p>Adi: <strong data-bind="text: adi"></strong></p>
<p>Soyadi: <strong data-bind="text: soyadi"></strong></p>

Yukarıda yer alan kodu çalıştırdığımızda input alanlarında yapacağımız değişiklikler onblur event’ı ile tetiklenecek focus input alanından çıktıktan sonra sayfa içerisinde yer alan tüm referanslara ilgili değişiklik yansıyacaktır.