KnockoutJS Template Yapısı

Bu yazımızda KnockoutJS kütüphanesinde Template yapısını inceleyeceğiz.Konuyu desteklemek amaçlı KnockoutJS’de dizi mantığından ve foreach yapısından faydalanacağız.

Hemen örnek amaçlı bir insanı modelleyen bir data oluşturalım.

    function Insan(Ad, Soyad, Memleket) {
        return {
            Ad: Ad,
            Soyad: Soyad,
            Memleket: Memleket
        };
    }

Şimdide bu datayı yapılandıracağımız ViewModel katmanımızı oluşturalım.

    function VMInsan() {
        Insanlar = ko.observableArray
            ([
                Insan("Selman", "Candemir", "Yozgat"),
                Insan("Gençay", "Yıldız", "Artvin"),
                Insan("Ahmet", "Yalçın", "Ankara")
            ]);
    }

Dikkat ederseniz eğer bir dizi yapısı oluşturmuş olduk.Bu dizi yapısını KnockoutJS kütüphanesinin observableArray metoduyla oluşturuyoruz. “ko.observableArray” komutunu kullanırken daha esnek bir yapı isterseniz eğer aşağıdaki gibi bir kullanımıda tercih edebilirsiniz.

    function VMInsan() {
        var InsanDizisi = new Array
            (
                Insan("Selman", "Candemir", "Yozgat"),
                Insan("Gençay", "Yıldız", "Artvin"),
                Insan("Ahmet", "Yalçın", "Ankara")
            );

        Insanlar = ko.observableArray(InsanDizisi);
    }

Velhasıl bu sizin tercihinize kalmış.

Şimdi buraya kadar bir insanı modelleyen data ve o datayı dizisel biçimde manipüle eden ViewModel katmanı oluşturmuş olduk.Şimdi KnockoutJS mimarisinin template yapısını kullanarak bu array yapısını listeletelim.

<h2>İnsanlar(<label data-bind="text: Insanlar().length"></label>)</h2>
<table style="width:50%;">
    <tbody data-bind="template: { name: 'TemplateInsanListesi', foreach: Insanlar }"></tbody>
</table>

<script id="TemplateInsanListesi" type="text/html">
    <tr>
        <td style="width:30%;" data-bind="text: Ad"></td>
        <td style="width:30%;" data-bind="text: Soyad"></td>
        <td data-bind="text: Memleket"></td>
    </tr>
</script>

Şimdi yukarıdaki kod bloğu sayesinde ViewModelimizde oluşturmuş olduğumuz Insan datalarıyla dolu Array yapımızı KnockoutJS Template yapısıyla listelemiş olduk.Yaptığımız işlemi satır satır izah etmek gerekirse;

• 1. Satırda, “Insanlar().length” komutu ile ViewModel’den gelen Insanlar dizisinde kaç eleman var ise hesaplayıp yazdırıyoruz.Tabi kafanıza Insanlar yapısında neden parantez kullandığımız takılabilir.Bunun sebebi, anladığım kadarıla ViewModel katmanında manipüle edilen yapılar View katmanında ya değer yapılı olarak ya da metoda benzer bir tarzda kullanılabilmekteler.Örneğin ilgili satırda “<label data-bind=”text: Insanlar”></label>” şeklinde bir kullanım yapmış olsaydık aşağıdaki gibi bir görüntüyle karşılaşacaktık.

  

  Bu demek oluyor ki, View’de kullandığımız Insanlar komutu yazıldığı gibi bir diziyi temsil etmektedir lakin üzerinde prosedürel metodları çalıştırabilmek için (parantez) ile kullanmak gerekmektedir.

• 3. Satırda ise, asıl bu içeriğimizin temel noktalarından biriside bu satırdadır.ViewModel katmanında oluşturduğumuz Insan datalarından oluşan Array yapısını Template yapısını kullanarak buradaki tabloda listeleteceğiz.Bu işlem için tbody etiketinin içini Template yapısının imkanlarıyla dolduruyoruz.Farkındaysanız tbody etiketi açıldığı gibi kapatılmıştır ve “data-bind=”template: { name: ‘TemplateInsanListesi’, foreach: Insanlar }” gibi bir komutla beslenmiştir.Bu komutta ki, “template” komutu ile bu tbody alanına bir template tanımlanacağını ifade etmiş oluyoruz.Süslü parantezler içerisindeki name parametresi o tanımlanacak olan templatein ismini almaktadır.Ben TemplateInsanListesi ismini verdim.Aynı şekilde süslü parantez içerisindeki ikinci parametre olan foreach ile de bu template’e hangi veri kümesinin bind edileceğini belirtiyoruz.Biz doğal olarak ViewModel katmanında oluşturmuş olduğumuz Insanlar Array yapısını vermekteyiz.
• 6. Satırda ise, bir script bloğunun açıldığını görmekteyiz.Bu script yapısının type özelliğinin text/html olduğuna dikkatinizi çekerim.Öncelikle bu açılan script bloğunun işlevine değindikten sonra kullanırken hangi hususların önemli olduğundan bahsedeceğim.

  Açtığımız script bloğuna bakarsanız eğer içerisinde tr ve td yapılarını barındırmakta ve td yapılarına birşeylerin değerini bind etmektedir(o birşeylere bir kaç satır sonra anlamlıca geleceğim).İşte 3. satırda bulunan tbody elemanına tanımlamış olduğumuz template yapısına bu scriptte bulunan yapıları gömeceğiz.Tabi gömeceğiz derken templateimizde oluşturduğumuz foreach döngüsü eşliğinde bu script çalışacak ve her eleman için bu işlev tekrarlanacaktır.

  Biliyoruz ki, ViewModel’de Insan datalarından oluşan “Insanlar” isimli bir Array tanımladık ve bu tanımlanan dizi yapısı “TemplateInsanListesi” isimli template e foreach ile dönülmek üzere bağlanmıştır.Script yapımız kaç eleman varsa o kadar çalışacaktır ve her Insan datasının “Ad”, “Soyad” ve “Memleket” özelliklerindeki değerleri içindeki td elemanlarına bind edecektir.Ee haliyle bir tablo içerisinde tr elemanları sayesinde satır satır verilerimiz işlenecek ve bir liste halinde görüntülenebilecektir.

  Burada dikkat etmeniz gereken husus ise, script’in id değeri ile template’in name değerleri aynı olmalıdırlar.Yani hangi template’i hangi script’in çalıştıracağını name ve id bağıntısı sayesinde çözümlüyoruz.

Yaptığımız çalışmanın derlenmiş halinin ekran çıktısı aşağıdaki gibi olacaktır.

Örneğimizde kullanmış olduğumuz tüm komutların derlenmiş hali,

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-2.1.4.min.js"></script>
    <script src="~/Scripts/knockout-3.3.0.js"></script>
</head>
<body>
    <h2>İnsanlar(<label data-bind="text: Insanlar().length"></label>)</h2>
<table style="width:50%;">
    <tbody data-bind="template: { name: 'TemplateInsanListesi', foreach: Insanlar }"></tbody>
</table>

<script id="TemplateInsanListesi" type="text/html">
    <tr>
        <td style="width:30%;" data-bind="text: Ad"></td>
        <td style="width:30%;" data-bind="text: Soyad"></td>
        <td data-bind="text: Memleket"></td>
    </tr>
</script>

<script type="text/javascript">

    function Insan(Ad, Soyad, Memleket) {
        return {
            Ad: Ad,
            Soyad: Soyad,
            Memleket: Memleket
        };
    }

    function VMInsan() {
        var InsanDizisi = new Array
            (
                Insan("Selman", "Candemir", "Yozgat"),
                Insan("Gençay", "Yıldız", "Artvin"),
                Insan("Ahmet", "Yalçın", "Ankara")
            );

        Insanlar = ko.observableArray(InsanDizisi);

    }

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

Sonraki yazılarımda görüşmek üzere…

İyi çalışmalar…