KnockoutJS’de ko.observable Metodu

KnockoutJS mimarisinde html elemanlara datalarımızı bind etmek için ko.observable metodunu kullanmaktayız.Bu metod, datanın bind edildiği eleman ile dinamik yapı sergilemektedir.Kastettiğimiz o ki, ko.observable ile bind edilen nesne ve data yapılarından herhangi birinde değişiklik olursa anında bu değişiklik diğerinede yansıyacaktır.

<input data-bind="value: Ad" />
<label data-bind="text: Ad"></label>

<script type="text/javascript">
    function VMOrnek() {
        Ad = ko.observable("Gençay");
    }

    $(document).ready(function () {
        ko.applyBindings(VMOrnek);
    });
</script>

Yukarıdaki kod bloğunu incelerseniz eğer bir “Ad” isminde property tanımlanmış ve bu property hem input hemde label elemanlarıyla bind edilmiştir.”ko.observable” metodu sayesinde bu üçlü ilişkide herhangi bir veri değişikliği söz konusu olursa diğerlerinede yansıyacaktır.

KnockoutJS'de ko.observable Metodu

“Gençay” değeri yanına “Yıldız” değerinide girdiğimiz anda Ad propertyimizdeki değişiklik label nesnesinede yansımaktadır.

Aşağıdaki farklı yapıyı incelerseniz ne demek istediğimi daha net anlayacaksınız.

<input data-bind="value: Ad" />
<input data-bind="value: Ad" />
<script type="text/javascript">
    function VMOrnek() {
        Ad = ko.observable("Gençay");
    }

    $(document).ready(function () {
        ko.applyBindings(VMOrnek);
    });
</script>

Dikkat ederseniz iki adet input elemanı aynı property ile bind edilmiştir.Şimdi herhangi birisinde olan değişiklik diğer inputuda etkileyecektir.

Soldaki seçili inputta değer değiştirildiğinde...

Soldaki seçili inputta değer değiştirildiğinde…

Sağdaki seçili inputta değer değiştirildiğinde...

Sağdaki seçili inputta değer değiştirildiğinde…

Gördüğünüz gibi ko.observable metodu bind edilen data ile elemanlar arasında dinamik bir seyir izlemektedir.

Peki, ko.observable kullanmadan dinamik rol üstlenmeyen tarzda bir property kullanımı nasıl gerçekleştirilir? diye sorarsanız eğer aşağıdaki kod bloğunu inceleyiniz…

<input data-bind="value: Ad" />
<input data-bind="value: Ad" />

<label data-bind="text: Ad"></label>
<script type="text/javascript">
    function VMOrnek() {
        Ad = "Gençay";
    }

    $(document).ready(function () {
        ko.applyBindings(VMOrnek);
    });
</script>

Yukarıda gördüğünüz gibi “Ad” isimli propertyi ko.observable metodu olmaksızın kullanmaktır.
KnockoutJS'de ko.observable Metodu - 4
Ekran görüntüsünden gördüğünüz gibi “Ad” isimli propertynin bind edildiği hiç bir elemanda veri değişikliği olmamaktadır.

Bu içeriğimizde KnockoutJS kütüphanesinde oldukça kullanışlı ko.observable metodunu incelemiş olduk.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar..

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

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

*