jQuery Template

Template kelimesini görünce akla hemen sitenin komple arayüzü geliyor fakat bu template tam olarak o template değil. Özetlemek gerekirse jSon veriyi istediğimiz kalıpta göstermemize olanak sağlayan ve html çıktısında kod tekrarını ortadan kaldıran bir yapı. Benide en çok kod tekrarını ortadan kaldırması cezbetti. Ne demek bu ? Örneğin; kod tarafında bir döngüyle ekrana 20 satır kayıt basıyoruz ve bu 20 satır kayıt için her seferinde div ul li gibi etiketlerle biçimlendirdiğimizden 20*html etiketi oluyor. Eklentinin ana sayfasına buradan ulaşabilirsiniz.

.

Html çıktısında görüldüğü üzere aynı li, a ve p etiketleri kayıt sayısı kadar tekrar ediyor. Jquery Template ile birlikte bu durumu ortadan kaldıracağız ve daha performanslı şekilde verilerimizi listeleyeceğiz.

Hemen jQuery ve Template eklentisini projemize ekliyoruz. Öncelikle verilerimizi Json formatına çevirmek için jSon.Net i indiriyoruz. Veriyi kendimizde json formatına çevirebilirdik fakat uğraşmaya hiç gerek yok. Birde yeri gelmişken Mvc 3 de kontrollerimizden geriye çok basit bir şekilde json data döndürebiliyoruz. Kodlarımıza göz atalım.

<script language="javascript" type="text/javascript">
    $(function () {
        $.getJSON('jsonVeri.aspx', function (data) {
            $('#icerikTemplate').tmpl(data).appendTo('#yazilar');
        });
    });
</script>

<!-- bu bizim içerisinde verilerin döneceği kalıbımız -->
<script type="text/x-jQuery-tmpl" id="icerikTemplate">
    <li>
        <a href="#">${baslik}</a>
        <p>${icerik}</p>
    </li>
</script>

<!-- içini dolduracağımız kalıbımız -->
<ul id="yazilar"></ul>

Öncelikle veriyi getJSON metoduyla istedik. Sonrasında gelen veriyle #icerikTemplate yi doldurduk ve son olarak #yazılar a ekledik. #icerikTemplate de bulunan ${…} ifadesi gelen json verideki ilgili alanı ifade ediyor. Bunu gridview yada repeater kontrolünü doldurmak gibide düşünebilirsiniz. Peki böyle yapınca ne oldu ? Hemen kaynak kodlarımıza bakalım.

Gördüğünüz üzere kaynak kodlarımıza ne tekrar eden bir etiket nede veri var. Ama sayfamızda veriler aynen görüntüleniyor. İlk gördüğümüz html çıktısı ile aynı işi yapan bu olaya jQuery Template diyoruz. Şimdi biraz derinlere dalalım. İlk olarak sayfamızdan template için oluşturduğumuz bölümü atalım.

İlk örnekte ki gibi json verimizi istedik sonrasında içine kalıbımızı koyduğumuz icerikTemplate.htm sayfamızı çağırdık ve sayfamıza ekledik, sonrası yukarıdakiyle aynı. Bu sayede tasarımı sayfamızdan ayırdık, eğer değişiklik gerekirse sadece icerikTemplate.htm sayfamızdan bu değişikliği yapmamız yetecektir.

jQuery template nin kendine özgü bir kodlama şekli bulunuyor (syntax) bakalım bu syntax da koşul işlemi nasıl yapılıyor.

Koşul {{if}} {{else}}
icerikTemplate.htm içerisinde gelen veriye göre koşul bildire biliyoruz. Örneğin gelen id 5 ise ilgili kaydı kırmızı yap gibi..

<script type="text/x-jQuery-tmpl" id="icerikTemplate">
    <li>
        <a href="#">${baslik}</a>
        {{if id==5}}
            <p style="color:red">${icerik}</p>
        {{else}}
            <p>${icerik}</p>
        {{/if}}
    </li>
</script>

Jquery template nin diğer bir güzelliği de kaynağımız içindeki verilere aynen ulaşabiliyor olmamız yani;

        $("#yazilar li").live("click", function () {
            $(this).slideUp();
        })

Şeklinde kullanıp aksiyonlarımızı aynen gerçekleştirebiliyoruz. Şimdi de facebook ile birlikte kullanımı moda olan bir olayı bu yöntem ile gerçekleştirelim. Nedir bu olay, yeni bir yorum yaptığımızda ajax ile birlikte sayfaya eklenmesi ve sildiğimizde aynı şekilde silinmesi. Bu tarz olaylarda templatenin önemi dahada artıyor, bunu ilerleyen satırlarda dile getireceğim.

<script language="javascript" type="text/javascript">
    $(function () {
        $.getJSON('jsonVeri.aspx', function (data) {
            $.get('icerikTemplate.htm', function (templates) {
                $('body').append(templates);
                $('#icerikTemplate').tmpl(data).appendTo('#yazilar');
            });
        });

        $("#icerikForm button").click(function () {
            var t = $(this);
            ajaxFormPost("baslik=" + t.parent().find("input[name=baslik]").val() + "&icerik=" + t.parent().find("textarea[name=icerik]").val());
        });

        $("#yazilar a").live("click", function () {
            var t = $(this);
            $.get("sil.aspx?id="+t.attr("id"));
            t.parent().slideUp();
        })

    });

    function ajaxFormPost(data) {
            $.ajax({
                url: "kaydet.aspx",
                type: "POST",
                data: data,
                success: function (result) {
                    var jsonData = jQuery.parseJSON(result);
                    $('#icerikTemplate').tmpl(jsonData).prependTo('#yazilar').hide().slideDown();
                },
                error: function () {
                    alert("Üzgünüm işleminiz yapılamadı :(");
                }
            });
    }

</script>
<ul id="yazilar"></ul>

<hr />
<div style="margin:30px;" id="icerikForm">
    Başlık: <input type="text" name="baslik" /><br />
    İçerik: <textarea name="icerik" style="width:400px;height:61px"></textarea>
    <br />
    <button type="button">Gönder</button>
</div>

Neler yapmışız bir bakalım. En üst kısmı artık anladık, templatemizi çağırıp doldurduk. Sonrasında #icerikForm içindeki butona tıklandığında verilerimizi ajaxFormPost fonksiyonumuza oradan da kaydet.aspx sayfamıza gönderip veri tabanımıza kaydettik. (kaydet.aspx sayfasının içeriğini projeyi indirdiğinizde görebilirsiniz.) Eğer bu sırada bir hata meydana gelirse işlemin yapılamadığına dair mesajımı veriyoruz. Eğer işlem başarıyla yapılmışsa, kaydet.aspx sayfasından gelen json verimizi aynı en başta gördüğümüz gibi templatemize dolduruyoruz ve hide().slideDown() yaparak biraz aksiyon katarak eklenen kaydı sayfamıza ekliyoruz.
Burada eğer template kullanmasaydık şöyle bir durumla karşılaşacaktık. Geri dönen veriyi ekrana basmak için;

$("#yazilar").prependTo("<li><a href='#' id='"+gelenveri+"'>"+gelenveri+"</a><p>"+gelenveri+"</p></li>");

Bu şekilde bir yazım gerçekleştirecektik, yani ikinci kez şablonumuzu yazacaktık. Bu şablonun çok basit bir şablon olduğunu tekrar hatırlatıyorum, eğer karmaşık bir şablon ile çalışsaydık burada tam bir çöplük meydana gelecekti.

Veriyi silmek içinde yazılar içerisinde bulunan a tagının click olayında get metoduyla sil.aspx sayfasına kaydın id sini yollayıp yine aksiyonlu bir şekilde silme işlemini yapıyoruz.

Karmaşık gelmiş olabilir fakat deneme yaptığınızda çok basit ve etkili bir yöntem olduğunu göreceksiniz. Özellikle günümüz sayfalarında görmeye alışık olduğumuz dinamik veri ekleme çıkarma işlemlerinin bu sayede ne kadar verimle ve kolay bir şekilde yapıldığını da göreceksiniz. Bu arada unutmadan ben asp.net ile anlattım fakat diğer dillerde de (php, asp, jsp) bu yöntemi rahatlıkla kullanabilirsiniz. Sonuçta sistem json üzerine çalışıyor ;)

Jquery template ile ilgili aklımda olanları sizlerle paylaştım, umarım faydalı bir yazı olmuştur. Buradan projenin çalışır halini indirebilirsiniz.

Örnekte silme işleminde sql enjeksiyona karşı bir önlem almadım, direk gelen parametreyi kullandım. Siz kullanırken sql enjeksiyona karşı gerekli düzenlemeyi yapın ;)