Mustache – Template Kullanımı

Mustache dil bağımsız olarak kullanılan bir template çözümü. Mustache dil bağımsız olmasına karşın çıkış noktasında JavaSript dili aktif olarak rol alıyor. Bu  sebeple Mustache.js sayfasındaki örnekleri incelediğinizde JSON nesnelerinin kullanıldığını görebilirsiniz. Fakat birçok programlama dili için Mustache template çözümünü kullanabilirsiniz.

Javascript dünyasında Mustache.js benzeri onlarca çözüm bulunuyor, örneğin bu bağlantıda Javascript dilinde kullanılabilen template çözümlerine değinmektedir. >>>

Mustache’ in sözdizim kuralları inanılmaz kolay, örneğin aşağıdaki gibi bir HTML elemanı kümesinin elimizde olduğunu düşünelim.

<span> <b>Hoşgeldin </b> {{ad}} {{soyad }}   <b> Ad+Soyad= </b> {{isimUzunluk}} </span>

Mustache yer tutucuları iki tane {{ ifadesiyle başlar ve yine iki tane }} ile sonlanır. Bu ifadelerin arasına ise, Mustache yer tutucuları/değişkenleri uygulanır. Örneğin yukarıdaki HTML tümcesinde ad, soyad ve isimUzunluk adında üç tane yer tutucu yer almaktadır.

Bir sonraki adımda ise, template içindeki yer tutuculara, çeşitli veriler uygulanmaktadır. Bu verileri ise, JSON formatındaki basit Javascript nesneleri sağlamaktadır.

var template,data;

data={
ad:"Mehmet",
soyad:"Yalçın",
isimUzunluk:function(){
return this.ad.length+this.soyad.length;
}
};

template=$('span').html();

$('span').html(Mustache.to_html(template,data));

Yukarıdaki data değişkenine adanmış nesneye baktığımızda, ad ve soyad isimli veri alanlarına ve isimUzunluk isimli Javascript fonksiyonu nesnesine sahip olduğu görülebilir.

İşte tamda bu noktada Mustache’in görevi ortaya çıkmaktadır. Mustache sizin tanımladığınız HTML template kümesine, oluşturduğunuz Javascript nesnesini uygulayarak, sonuçta size yer tutuculara veri giydirilmiş HTML çıktısı döndürmektedir. (Mustache.to_html(.. , ..) ile.)

Örnek uygulamanın çıktısına aşağıdaki fiddle arayüzden erişebilirsiniz.

[wp-js-fiddle url=”http://jsfiddle.net/rahmanusta/gG5St/” style=”width:100%;height:250px;border:solid #4173A0 1px;”]

Bir yukarıdaki örnekte, template olarak tüm <span ../> nesnesi kullanılmıştı. Fakat tekrar kullanılabilirlik ve kompleks HTML kümelerini şablon olarak tanıtmak adına, Mustache HTML <script ../> bileşeni içinde harici template desteği de sunmaktadır.

Örnek olarak aşağıdaki HTML elemanlarına göz atalım.

<div id="placeholder"/>

<script id="yazarlar" type="text/template">
<ul>
{{#yazarlar}}
{{#goster}} <li> {{ad}} {{soyad }} </li> {{/goster}}
{{/yazarlar}}
</ul>
</script>

Yukarıdaki <script ../> bileşenine dikkat kesildiğinde, {{ }} arasında çeşitli yer tutucuların olduğu görülebilir. Fakat bu yer tutucularda diğer örnekten farklı olarak # ve / ifadelerinin kullanıldığı görülür. # ifadesiyle başlayan yer tutucu, ait olduğu yer tutucunun başlangıcını temsil ederken / ile biten yer tutucu ise sonlanışını temsil etmektedir. Bu aralıktaki içerikler ise, o yer tutucunun hakimiyet alanını temsil eder durumdadır.

# ve / ifadeli kullanımın iki avantajı bulunmaktadır. Bir tanesi, dizi elemanı türündeki bileşenleri tek tek dolaşarak, for each benzeri bir etki oluşturmak iken, diğeri ise şart koşumu yaparak sağlanan verinin true/false bilgisine göre, içeriği göster-gösterme şeklinde özetlenebilir.

Şimdi Javascript kod parçasını inceleyerek, olayı daha iyi anlayabiliriz.

var collData,template;

template=$("#yazarlar").html();

collData={
yazarlar:
[
{ad:"Rahman",soyad:"Usta",goster:false},
{ad:"Hüseyin",soyad:"Akdoğan",goster:false},
{ad:"Altuğ",soyad:"Altıntaş",goster:false},
{ad:"Cüneyt",soyad:"Yeşilkaya",goster:true},
{ad:"Ömer Faruk",soyad:"Zorlu",goster:true},
{ad:"Mehmet",soyad:"Yalçın",goster:true}
]
};

$("#placeholder").html(Mustache.to_html(template,collData));

Örneğin buradaki collData nesnesi içinde bir yazarlar dizisi bulunmaktadır. Dizi içindeki tüm elemanalar ise {{#yazarlar}} .. {{/yazarlar}} yer tutucusu içinde tek tek tüketilerek <li ../> bileşenleri içinde HTML sayfasına çıktılanmaktadır. <li ../> elemanı içindeki {{#goster}} .. {{/goster}} yer tutucusu ise, sunulan veriye göre şart işlemi veya listeleme görevi görecektir. yazarlar dizisi içindeki goster verisi Boolean tipi barındırdığı için, Mustache bu yer tutucuyu true/false bilgisine göre HTML sayfasında gösterecek veya göstermeyecektir. Bu örneğin çıktısını da yine aşağıdaki jsfiddle arayüzünden test edebilirsiniz.

[wp-js-fiddle url=”http://jsfiddle.net/rahmanusta/XfnhL/” style=”width:100%;height:300px;border:solid #4173A0 1px;”]

Tekrar görüşmek dileğiyle.