KnockoutJS Template Yapısında Data ve As Parametreleri

Bir önceki KnockoutJS Template Yapısı başlıklı yazımda KnockoutJS mimarisinde Template yapısına giriş yapmıştık.Tabi ilgili makele Template yapısındaki foreach kontrolüyle ilgili bir örnekle seyredilmişti.Bu yazımızda ise Template yapısındaki diğer kontrol yapılarına detaylıca değineceğiz.

data parametresi
Önceki yazıma göz atarsanız eğer, datalarımızın bulunduğu bir dizide foreach parametresi sayesinde dönerek Template yapısı ile ilgili alana gerekli verileri basma işlemini ele almıştık.Data parametresi sayesinde bir data dizisinden ziyade bir tek data verisini Template yapısıyla istediğimiz yere basabiliyoruz.

Örnek olarak elimizde aşağıdaki gibi bir ViewModel yapımız olsun.

<script type="text/javascript">
    function VMOkul() {
        Ogrenci = { Adi: "Gençay", SoyAdi: "Yıldız", Numarasi: 11040355 };
        Ogretmen = { Adi: "Nurettin", SoyAdi: "Şimşek", Dersi: "LMS" };
    }
</script>

Bu ViewModel içerisinde oluşturulan Ogrenci ve Ogretmen propertylerindeki verileri Template yapısında data parametresini kullanarak aşağıdaki gibi yazdırabiliriz.

<div data-bind="template: {name: 'OgrenciTemplate', data: Ogrenci}"></div>
<div data-bind="template: {name: 'OgretmenTemplate', data: Ogretmen}"></div>

<script id="OgrenciTemplate" type="text/html">
    <h4>Öğrenci</h4>
    <p><strong>Tip : </strong><span data-bind="text: Tip"></span></p>
    <p><strong>Adı : </strong><span data-bind="text: Adi"></span></p>
    <p><strong>Soyadı : </strong><span data-bind="text: SoyAdi"></span></p>
    <p><strong>Numarası : </strong><span data-bind="text: Numarasi"></span></p>
</script>
<script id="OgretmenTemplate" type="text/html">
    <h4>Öğretmen</h4>
    <p><strong>Tip : </strong><span data-bind="text: Tip"></span></p>
    <p><strong>Adı : </strong><span data-bind="text: Adi"></span></p>
    <p><strong>Soyadı : </strong><span data-bind="text: SoyAdi"></span></p>
    <p><strong>Dersi : </strong><span data-bind="text: Dersi"></span></p>
</script>

Gördüğünüz gibi ViewModeldeki veri yapılarını data parametresi sayesinde ilgili alanlara yansıtmış oluyoruz.
KnockoutJS Detaylıca Template Yapısını Ele Alalım

as parametresi
Bu parametre genellikle property değerine sahip olmayan array yapılarındaki verilere ulaşabileceğimiz bir isim tanımlamak için veya template yapısında birden fazla foreach kullanacaksak ve bu döngüler iç içe bir yapıda olacaksa eğer döngülerin veri kümelerine alias yani bir sembolik isim tanımlamak için kullanılmaktadır.

    function VMOkul() {
        Ogrenciler = ko.observableArray([
            {
                Adi: "Gençay",
                SoyAdi: "Yıldız",
                AldigiDersler: ["A Dersi", "B Dersi", "C Dersi"]
            }, {
                Adi: "Mehmet",
                SoyAdi: "Subaşı",
                AldigiDersler: ["D Dersi", "E Dersi", "F Dersi"]
            }, {
                Adi: "Ceylan",
                SoyAdi: "Kayapınar",
                AldigiDersler: ["G Dersi", "H Dersi", "I Dersi"]
            }, {
                Adi: "Nurettin",
                SoyAdi: "Saglam",
                AldigiDersler: ["İ Dersi", "O Dersi", "Ö Dersi"]
            }
        ]);
    }

Yukarıdaki ViewModeldeki Ogrenciler dizi yapısı tanımlanmıştır.Dikkat ederseniz AldigiDersler propertyside bir array yapısıdır.Şimdi biz hem Ogrenciler dizi yapısı içerisinde dönerek listeleme yapacağız, bunun yanında her öğrencinin aldığı dersleri tutan AldigiDersler propertysindeki dizi yapısı içerisinde de döneceğiz.AldigiDersler dizisi içerisindeki verilerin bir property değerleri olmadığı için bunlara as parametresiyle tanımladığımız isim sayesinde ulaşacağız.Bir yandan da Ogrenciler dizisindeki verilerede iç içe foreach döngüsündeki o anki üst değere ulaşmak için as parametresiyle ayrı bir isim tanımlayarak işlemlerimizi gerçekleştireceğiz.

Lakin,

<div data-bind="template: {name: 'OgrencilerTemplate', foreach:Ogrenciler}"></div>

<script id="OgrencilerTemplate" type="text/html">
    <ul>
        <li>
            <strong>Adı : </strong><span data-bind="text: Adi"></span>
            <br />
            <strong>Soyadı: </strong><span data-bind="text: SoyAdi"></span>
        </li>
    </ul>
</script>

eğer bu şekilde bir kullanım yaparsak sadece Ogrenciler isimli array yapımızdaki elemanların Adi ve SoyAdi property değerleri ekrana yazdırılacaktır.Şimdi bu yapıya AldigiDersler dizi yapısındaki döngüyüde ekleyelim.

<div data-bind="template: {name: 'OgrencilerTemplate', foreach:Ogrenciler}"></div>

<script id="OgrencilerTemplate" type="text/html">
    <ul>
        <li>
            <strong>Adı : </strong><span data-bind="text: Adi"></span>
            <br />
            <strong>Soyadı : </strong><span data-bind="text: SoyAdi"></span>
            <br />
            <ul data-bind="template : {name: 'AldigiDerslerTemplate', foreach: AldigiDersler, as: 'Ders'}"></ul>
        </li>
    </ul>
</script>


<script id="AldigiDerslerTemplate" type="text/html">
    <li>
        <span data-bind="text: Ders"></span>
    </li>
</script>

Yukarıdaki kod bloğunu incelerseniz eğer “AldigiDerslerTemplate” isminde bir template tanımlanmakta ve bu template yapısında foreach parametresine “AldigiDersler” isimli dizi yapısı verilmektedir.Lakin “AldigiDersler” dizi yapısının içindeki verilere ulaşabileceğimiz bir property adı bulunmadığı için bunlara as parametresiyle atadığımız “Ders” ismiyle ulaşabilmekte ve işlemlerimizi “AldigiDerslerTemplate” isimli template scriptinde gerçekleştirebilmekteyiz.

as parametresiyle ilgili ek olarak ekleyebileceğimiz işlemde Ogrenciler dizisindeki o anki elemana içteki döngüde ulaşabilmektir.

<div data-bind="template: {name: 'OgrencilerTemplate', foreach:Ogrenciler, as: 'Ogrenci'}"></div>

<script id="OgrencilerTemplate" type="text/html">
    <ul>
        <li>
            <strong>Adı : </strong><span data-bind="text: Adi"></span>
            <br />
            <strong>Soyadı : </strong><span data-bind="text: SoyAdi"></span>
            <br />
            <ul data-bind="template : {name: 'AldigiDerslerTemplate', foreach: AldigiDersler, as: 'Ders'}"></ul>
        </li>
    </ul>
</script>


<script id="AldigiDerslerTemplate" type="text/html">
    <li>
        <span data-bind="text: Ders"></span>
        -
        <span data-bind="text: Ogrenci.Adi"></span>
    </li>
</script>

Yukarıdaki kod bloğunu incelerseniz eğer “OgrencilerTemplate” isimli Template yapısına as parametresiyle o an foreach döngüsünde elde tutulan nesneyi tanımlayacak “Ogrenci” değerini vermiş olduk.Bu “Ogrenci” değeri sayesinde “AldigiDerslerTemplate” isimli template yapısında üst döngüdeki o anki nesneye ulaşabiliyor ve istediğimiz değeri yazdırabiliyoruz.

Örnektede gördüğünüz gibi “Ogrenci.Adi” komutuyla foreach döngüsündeki o anki öğrenci nesnesini elde ediyor ve Adi değerini yazdırabiliyoruz.

KnockoutJS Detaylıca Template Yapısını Ele Alalım - 2

Sanırım bu yazımlada beraber KnockoutJS mimarisinde template yapısını ortalama esneklikte kullanabileceğiniz tüm parametreleri tanıtmış oldum.
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

*