KnockoutJS’de Model Oluşturma

Önceki yazılarımdan olan KnockoutJS Nedir? Ne Amaçla, Nasıl Kullanılır? başlıklı yazımda KnockoutJS’ye ne amaçla ve nasıl kullanıldığına dair bir giriş niteliğinde başlangıç yapmıştık.Haliyle bu yazımızda KnockoutJS’de bir kendimiz bir model oluşturup kullanmayı irdeleyeceğiz.

Şimdi örnek amaçlı bir insanı modelleyen bir model oluşturalım.

    function Insan(Ad, Soyad, Yas, Cinsiyet) {
        var _Ad = Ad;
        var _Soyad = Soyad;
        var _Yas = Yas;
        var _Cinsiyet = Cinsiyet;

        return {
            InsanOzellikleri: ko.observable("Adı Soyadı : " + _Ad + " " + _Soyad + " Yaşı : " + _Yas + " Cinsiyeti : " + _Cinsiyet)
        };
    }

Yukarıdaki kod bloğunu incelerseniz eğer bir Model oluşturmuş olduk.KnockoutJS’de modeli bildiğiniz fonksiyon olarak tanımlıyoruz.Oluşturduğumuz bu örnek model parametreler almakta ve bu parametrelerin değerlerini alt tireyle(_) başlayan değişkenlere atamaktayız.Lakin burada dikkat etmeniz gereken husus ise bu modelde property(özellik) olarak barındırılacak yapıların bu değişkenlerin olmamasıdır.Modelde property olarak kullanılacak yapılar return {…} bloğu içerisinde oluşturulan yapılardır.Örnekte biz InsanOzellikleri isimli bir property oluşturduk ve değişkenlerdeki değerleri bu propertye set edip, bu verilerin çağrıldıklarında get işlemini gerçekleştirdik.

Bu modelde aşağıdaki gibi daha çok property yapısıda oluşturabilirdik.

    function Insan(Ad, Soyad, Yas, Cinsiyet) {
        var _Ad = Ad;
        var _Soyad = Soyad;
        var _Yas = Yas;
        var _Cinsiyet = Cinsiyet;

        return {
            Ad: _Ad,
            Soyad: _Soyad,
            Yas: _Yas,
            Cinsiyet: _Cinsiyet
        };
    }

Gördüğünüz gibi eğer bu şekilde oluşturmuş olsaydık bu modeli kullanırken “Ad”, “Soyad”, “Yas” ve “Cinsiyet” propertylerine ulaşabilirdik.

Şimdi bu son haliyle oluşturduğumuz modeli aşağıdaki gibi bir ViewModel’de kullanmayı inceleyelim.

    function ViewModel() {
        InsanNesnesi = Insan("Gençay", "Yıldız", "24", "Erkek");
    }

Gördüğünüz gibi oluşturmuş olduğumuz Insan modelinden ViewModel’de bir nesne üretmiş olduk.Hani ViewModel bizim View ile Model katmanları arasındaki bağlantıyı sağlama görevine sahip olduğu için birazdan bu ViewModel’de ki oluşturduğumuz nesneyi View katmanında kullanacağız.Tabi burada demem gereken mühim nokta şu ki, ViewModel’de sadece propertyler değil nesneler üzerinden de işlemler gerçekleştirebiliriz.Bu dediğime misal olarak yukarıda vermiş olduğum ViewModel’i ele alalım.Bir Insan modelinden nesne üretiyoruz ve o nesneyi direkt “InsanNesnesi” isimli bir özelliğe atıyoruz.Bu “InsanNesnesi” ismini verdiğimiz özelliğin adında View katmanında da aynı isimde Bind edilmiş nesnelerde nesnemizi kullanabileceğiz.

<div>
    <p data-bind="text : InsanNesnesi"></p>
</div>

Örnek olarak ViewModel’de ki “InsanNesnesi” özelliğiyle yukarıdaki gibi html elemanını birbirine bağlayıp Bind etmiş olalım.Bakalım projeyi çalıştırdığımızda karşımıza nasıl bir görüntü gelecektir.
KnockoutJS'de Model Oluşturma

Oppss!!!O da ne!
[object Object] diye hataya benzer bir şey aldık.
Eee bunun sebebi; bizim ViewModel’de “InsanNesnesi” özelliğine direkt olarak “Insan” modelinden bir nesne bağlamış olmamızdan kaynaklanmaktadır.Haliyle “InsanNesnesi” özelliğini direkt html nesnesine Bind edince bu şekilde bir yazı yazıyor.Yani adam bize “kardeşim bu Bind ettiğin yapı bir obje, objeee” diyor.Haliyle biz Bind edilen nesnenin hangi propertysi olduğunu belirtmeliyiz.

<div>
    <p data-bind="text : InsanNesnesi.Ad"></p>
</div>

Yukarıdaki gibi bir güncelleştirme yaptım ve “InsanNesnesi.Ad” diyerek Bind edilen datanın(ki o datanın biz bir nesne olduğunu biliyoruz) “Ad” isimli propertysini bu html elemanına bağlıyoruz(Bind) ediyoruz.
KnockoutJS'de Model Oluşturma-2
Bakın, şimdi gördüğünüz gibi data olarak gönderilen nesnenin propertysine Bind edilince sıkıntısız ilgili alana verimiz gelmektedir.

Şimdi örneğimizi genişletelim.

    function ViewModel() {
        var InsanNesnesi = Insan("Gençay", "Yıldız", "24", "Erkek");
        Ad = InsanNesnesi.Ad;
        Soyad = InsanNesnesi.Soyad;
        Yas = InsanNesnesi.Yas;
        Cinsiyet = InsanNesnesi.Cinsiyet;
        Huseyin = "Örnek";
    }

ViewModel katmanımızda yukarıdaki gibi bir fantezi uygulayalım.

<div>
    <p data-bind="text : Ad"></p>
    <p data-bind="text : Soyad"></p>
    <p data-bind="text : Yas"></p>
    <p data-bind="text : Cinsiyet"></p>
    <p data-bind="text : Huseyin"></p>
</div>

View katmanımızda da bu şekilde ViewModel’de ki özelliklere uygun bağlantılar kuralım.Bakalım ne olacak;
KnockoutJS'de Model Oluşturma-3
Gördüğünüz gibi nesnemizdeki propertyleri tek tek ViewModel’de farklı özelliklere tanımlayıp, html nesnelerinde o özellikler üzerinden de bağlantı kurabiliyoruz.

Tabi soracaksınız şimdi “Huseyin diye özellik ne alaka la” diye?

Bunu koymamın sebebi, örnekteki ViewModel yapısını sadece modele bağlı olarak çalıştığını sanmayın, oldukça esnek çalışma yapabiliyoruz diyebilmek için vermiş bulunmaktayım.Ha Huseyin ismini sorarsanız eğer heyecandan özelliğe verecek başka isim bulamadım.Aceleye geldi…

Neyse,

Nihayetinde KnockoutJS mimarisinde model yapısının nasıl oluşturulduğu ve oluşturduğumuz kendi modelimizi nasıl kullandığımızı görmüş olduk.

Son olarak KnockoutJS ile bunca işlemi yapabilmek için applyBindings metodu ile ilgili ViewModel’i Knockout objesine Bind etmemiz gerektiğini hatırlatmak isterim.

    $(document).ready(function () {
        ko.applyBindings(ViewModel());
    });

Evet, bir sonraki KnockoutJS yazımızda sanırım template yapısından bahsedeceğim.
O halde sonraki yazılarımda görüşmek üzere…

İyi çalışmalar dilerim…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

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

*