jQuery template nedir ve nasıl kullanılır?

29 Eylül 2016 4 dk okuma süresi 901 okunma

jQuery template, json verisini client tarafında istediğimiz gibi göstermemize yarayan ve kod tekrarını önleyen bir yapıdır. Asp.net ile kodlama yapıyorsanız repeater, listview gibi bir yapısı olduğunu düşünebilirsiniz, fakat aradaki fark verinin server tarafında değil client tarafında bind edilmesidir. Kod tekrarından kasıt json veri içerisinde dönerken sürekli td, tr, ul, li gibi etiketler yaratıp durmaktansa javascript tarafında ufak bir template yazarak sadece veriyi bağlamak çok daha kolay. Aklınıza basit bir fonksiyon yazıp veriyi oraya gönderip yazmak geliyordur elbette ama sonuçta o fonksiyonun içerisinde de sürekli bu etiketleri bir kere açmanız gerekecek. Örneğin table yapısı kullanıyorsanız bunu bir list'e çevirmek isterseniz yine oturup tek tek satırlarda tr, td etiketlerini ul, li etiketlerine dönüştüreceksiniz. Özellikle birçok ajax post/get işlemi yapıyorsanız gerçekten çok işinize yarayacaktır.

jQuery template için birçok eklenti mevcut. Ben BorisMoore'un yazdığı jquery template plugin'ini kullanıyorum.

Kullanabileceğiniz diğer jQuery template pluginleri:

Nano jQuery template engine - https://github.com/trix/nano
jsViews - https://github.com/BorisMoore/jsviews
google-jstemplate - http://code.google.com/p/google-jstemplate/

jQuery Template Örneği

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Template Ornegi</title>
</head>
<body>
    <div id="wrapper">
        <h1>Kutuphane Ornegi</h1>
        <div id="container"></div>
    </div>
    <script id="ornekTemplate" type="text/x-jQuery-tmpl">
        <div>
            <img src="img/${kitap_resmi}" alt="" class="img-responsive" />
            <h3>${kitap_basligi}</h3>
            <p>${kitap_ozeti}</p>
            <p class="font-bold">Fiyat: ${kitap_fiyati}</p>
            <hr />
        </div>
    </script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/BorisMoore/jquery-tmpl/master/jquery.tmpl.js"></script>
    <script type="text/javascript">
        // Ornek olmasi acisindan elle bir object array yaratiyorum
        // Muhtemelen siz veritabanindan verileri cekip buraya json olarak donersiniz
        var kitaplar = [
            { kitap_basligi: "Nutuk", kitap_fiyat: 15.25, kitap_ozeti: "Nutuk kitabının özeti", kitap_resmi: "kitap_1.jpg" },
            { kitap_basligi: "Atatürk ve Köy Enstitüleri", kitap_ozeti: "Atatürk ve Köy Enstitüleri kitabının özeti", kitap_fiyat: 22.99, kitap_resmi: "kitap_2.jpg" },
            { kitap_basligi: "Atatürk - Geometri", kitap_ozeti: "Atatürk - Geometri kitabının özeti", kitap_fiyat: 21.00, kitap_resmi: "kitap_3.jpg" },
            { kitap_basligi: "İnkılap Tarihi", kitap_ozeti: "İnkılap Tarihi kitabının özeti", kitap_fiyat: 26.99, kitap_resmi: "kitap_4.jpg" },
        ];
        // Burada json verisini ilgili template'e gore render ediyoruz ve sonucunun container id'li div'e yaziyoruz
        $("#ornekTemplate").tmpl(kitaplar).appendTo("#container"); 
    </script> 
</body>
</html>

Aşağıdaki gibi bir görüntü elde etmiş olacaksınız.

Örneği Github üzerinden de inceleyebilirsiniz.

jquery jquery template nedir jquery template jquery template kullanımı

Yazılarıma abone olmak ister misiniz?

İlginizi çekebilecek diğer yazılar.