"Enter"a basıp içeriğe geçin

jQuery Template yapısı ve kullanımı.

JQuery Template Nedir?

jQuery template temelde javascript kodu ile html kodunu ayırmak için tasarlanmış bir yapıdır. Asp.net’in repeater’ı benzeri bir modeli vardır. Farkı; databinding javascript tarafından yapılır. Özellikle yoğun ajax kullanımının olduğu uygulamalarda, gelen json formatındaki dizileri bind etmek suretiyle kullanılır.

Web uygulaması geliştirilen her dille uyumlu olarak çalışabilen bu yapı. Asp.net geliştiricileri için çok daha kolaylık sağlamaktadır. Proje sırasında düzenlenmesi gerektiği durumlarda projenin tekrar derlenmesini gerektirmeden template dosyasını düzenlemesi ile bu çalışma yapılmış olacaktır.

jQuery Template kullanımı ve kod yapısı.

Kullanımı

jQuery template kullanımı için jquery.tmpl.js kodyasını projemize entegre etmemiz gerekmektedir.

http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js

http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js

Kod Yapısı

[php]
<script id="ornek-tmpl" type="text/x-jquery-tmpl">// <![CDATA[
Kod Blogu Buraya gelecek.
// ]]></script>
[/php]

Ufak bir örnekle bu kod yapısını biraz daha açalım.

Örnek Kod

[php]

<script id="members-list-tmpl" type="text/x-jquery-tmpl">// <![CDATA[
{{if Json}}
{{each Json}}
{{if State=="0" }}
<li> Durum Aktif Değil. ${Name}-{{tmpl "#department-tmpl"}}</li>

{{else}}
<li>Aktif:${Name} – {{html Department}}</li>

{{/if}}
{{/each}}
{{else}}
<li>İçerik Bulunamadı.</li>

{{/if}}
// ]]></script><script id="department-tmpl" type="text/x-jquery-tmpl">// <![CDATA[
<strong>${id}</strong>
// ]]></script>
[/php]

Yukarıda kod yapısını açıklayacak olursak.

  1. id=”members-list-tmpl” type=”text/x-jquery-tmpl” : jQuery Template yapımızı tanımlamak için kullandığımız tag yapısı. ID alanı jquery templatemizin ismi ve type alanı da içerisinde yer alan kodların jquery tmpl olduğunu belirtiyor.
  2. 2.       {{if Json}} : Gelen datamızın içeriğinin olup olmadığı  kontrol ediyoruz.Eğer gelen data  yok ise. {{else}} kodu ile ekrana vermek istediğimiz uyarı mesajını yazıyoruz.
  3. 3.       {{each Json}} : Gelen datamızı döngüye sokmamızı sağlar.
  4. 4.       ${Name} : Data içerisinde yer alan veriyi bu şekilde ekrana basıyoruz. “${degisken}”. Earch olarak kullanmadığımız yani sadece tek veri gelen kısımlarda ise “${dataAdi.degisken}”  olarak kullanıyoruz.
  5. 5.       {{tmpl “#department-tmpl”}} :  Gelen datamızı ortak olarak birkaç yer de kullandığımı template yolluyoruz bu sayede kod fazlalığından kurtulmuş oluyoruz.
  6. 6.       {{html Department}} : Gelen datamızın içeriğinde eğer html kod varsa bu şekilde kullanarak gelen içeriğin browser tarafından işlenmesini sağlaya biliyoruz bu kodu kullanmazsak gelen içeriğimizi düz metin olarak ekranda gösterecektir.
  7. 7.       {{wrap “#examplewrap-tmpl”}}: Şu anki örneğimizde bu konu hakkında bir örnek mevcut değil ancak kullanımı şu şekilde. Tmpl kullanımının amacı gibi kod fazlalığını önlemek açısında ortak olarak kullanılan bir wrap-tmpl tanımlanıp bu kod ile içeriğimizi sarmamızı sağlaya biliriz. Yani bu kod kullandığımızda gelen tmpl içeriğimiz saracaktır.

Script Taraflı kod Kullanımı

 

$(“#members-list-tmpl”).tmpl(jsonData).appendTo(“#members-list”);

Bu yazmış olduğumuz kodu şu şekilde açıklaya biliriz. Html içerisinde tanımlamış olduğumuz tmpl alanını jquery tmpl metodunu kullarak sistem tarafıdan oluşturduğumu jsonData nesnemizi gönderiyor ve hangi alan bu işlemini uygulanması gerektiğini belirtiyoruz.

Yani: #members-list-tmpl templat’i kullarak jsonData verilerini #members-list id’li alna uygula.

jQuery Template ile ilgili örnek projeye jqueryTemplate‘den ulaşabilirsiniz.

İyi Çalışmalar.
Ahmet KAYAR

İlk Yorumu Siz Yapın

Bir Cevap Yazın

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