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

29 Eylül 2016 4 dk okuma süresi 213 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:

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.

jquery-template
jquery-template

Örneği Github üzerinden de inceleyebilirsiniz.

Yazılarıma abone olmak ister misiniz?
Spam yapılmaz, sadece bildirim amaçlıdır. İstediğiniz zaman abonelikten çıkabilirsiniz.
İlginizi çekebilecek diğer yazılar.
jQuery ile tüm tarayıcılarda input select option'larını sağlıklı şekilde gizleyip göstermeye yarayan kod parçası.

ASP.NET MVC 3 ile gelen kullanışlı bir özellik olan remote validation nedir, nasıl kullanılır?

Sosyal medyada her gün yüzlerce link paylaşılıyor. Ama kaç kere paylaşım yapılmış pek bilme şansımız olmuyor, tabi ekstra plugin falan kullanmıyorsanız. Bu makalede facebook, twitter, linkedin, pinterest gibi sosyal medyada sorgulama yaptığınız url'nin kaç kere paylaşıldığını gösteren kod parçalarını bulabilirsiniz.