Mustache.js Nedir? Nasıl Kullanılır?
JavaScript temelli web template (şablon) sistemi Handlebars.js'den bahsedip Mustache.js‘den bahsetmemek olmazdı elbette.
Bunun 2 önemli nedeni var. İlki, Mustache.js‘nin esasında dil bağımsız olarak kullanılan bir template çözümü olması. Diğeri ise, Handlebars.js‘in aslında Mustache şablon dilini benimsemesi. Bu nedenle çok az efor ile iki sistem arasında kolaylıkla geçiş yapabilmek mümkün. Elbette iki sistem arasında benzerlikler kadar farklılıklar da mevcut 1 2, bu sebeple her iki sistemi de iyi bir şekilde değerlendirmiş olmak gerekiyor. Konumuza dönelim ve “Mustache template sistemi nedir ve nasıl kullanılır?” sorusunu cevaplandıralım.
Mustache.js
Yazının giriş paragrafında da belirttiğim üzere, Mustache dil bağımsız olarak kullanılabilen bir şablon (template) sistemi. İsmini {}
karakterinden (tr: süslü parantez / en: braces, curly brackets) almaktadır. Mustache template sisteminde yer tutucular {{}}
içerisinde tanımlanır. Örneğin, {{name}}
. Örnek içerisinde yer alan name
bir yer tutucu/değişkendir ve render sonucu kendisine atanan bir veriyi yansıtır. Atanan veriler JSON formatındaki basit JavaScript nesne (object) değerleridirler (value).
Mustache.js Kullanımı
Mustache.js olarak ifade edildiğinde elbette çoğu durumda karşılığı JavaScript dili ile oluşturulabilecek şablonlar olacaktır. Ancak, template sisteminin kaynak sayfasına göz attığımızda3 JavaScript4 dışında Python5, Go6, Lua7, R8, Rust9 gibi dillerde de kullanabildiğimizi görebilmekteyiz. Elbette bu kadar geniş bir yayılıma sahip olmasının altındaki etkenler, sözdizimi kurallarındaki sadelik ve logic-less yapısı olarak da özetlenebilir. Logic-less10, bir template (şablon) içeriğinin komplike işlemler yerine (örn. if-else gibi kontrol akışı ifadeleri) oldukça temel fonksiyonlarla / etiketlerle (tags) sağlanabiliyor oluşu (veri temelli kontroller) olarak özetlenebilir11. Bazı etiketler değer alabilir, bazıları alamaz ve bazı etiketler ise biz dizi değeri kapsayabilir. Hemen basit bir örnek oluşturalım:
Merhaba {{name}},
{{#etiket}}
Örnek bir metin.
{{/etiket}}
İlk satırda {{name}}
kendisine atanan bir veri ile yer değiştirecektir. {{#etiket}}...{{/etiket}}
ise true/false değer almış (boolean) ise koşullu bir ifade (if-else), bir dizi almış ise döngü (foreach loop) olarak işlem gerçekleştirebilir. Şimdi de basit bir örnek uygulama yapalım.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
</head>
<body>
<div>Hello! My name is <strong>{{name}} {{surname}}</strong>.</div>
<script type="text/javascript">
var template, data;
data={
name: "Hayden",
surname: "Mcguire"
};
template = $('div').html();
$('div').html(Mustache.to_html(template, data));
</script>
</body>
</html>
Yukarıdaki data
içeriğine baktığımızda name
ve surname
ifadelerini ve bu ifadelere atanmış değerleri görmekteyiz. Mustache bu ifadeleri aldıkları değerlerle birlikte işleme alıp Mustache.to_html()
ile ilgili yer tutuculara (div
içerisinde {{}}
ile tanımlanmış alanlar) aktarmaktadır ve sonuç olarak {{name}} {{surname}}
alanı karşımıza Hayden Mcguire
olarak çıkmaktadır. Handlebars yazısındaki örnek ile oldukça benzer, değil mi? Bir benzerlik daha! İlgili işlemi şimdide script
etiketi içerisinde gerçekleştirelim.
<div id="content"></div>
<script id="template" type="text/x-mustache-template">
Hello! My name is <strong>{{name}} {{surname}}</strong>.
</script>
<script type="text/javascript">
var template, data;
data={
name: "Hayden",
surname: "Mcguire"
};
template = $("#template").html();
$('#content').html(Mustache.to_html(template, data));
</script>
Bu defa sadece body
içeriğini düzenledim. Kodu uyguladığınızda çıktının bir önceki örnekteki ile aynı olduğunu görebilirsiniz. script
kullanımı özellikle şablonlar oluşturmak istediğimizde yanı işlemleri tekrarlamamak adına (bkz. DRY) tercih edilmektedir. 100 satırdan oluşan Handlebars örneğinin buraya tıklayarak Mustache üzerinden yeniden ele alınmış halini görüntüleyebilirsiniz.
Web template sistemlerine ayrıca değineceğim bir yazım olacak12. Bu toparlayıcı yazı öncesinde ele alacağım ek birkaç template sistemi daha var. İlgili template sistemlerinin giriş yazılarının sonrasında, örnekler içerisinde çokça pratik imkanımız olacak. Ayrıca, aşağıda bazı yazı önlerileri listeledim. Ele alınan örneklerin ve açıklamaların oldukça fayda sağlayacağını tahmin ediyorum.
- mustache.js Github
- HTML Templates with Mustache.js
- Mustache.js Template Rendering
- Introduction to Mustache
- Creating HTML Templates with Mustache.js
- Chad Johnson. (2012). What are the differences between Mustache.js and Handlebars.js?. StackOverflow ↩
- J-Gallo. (2016). {{ Mustache vs Handlebars }} ↩
- Logic-less templates. Mustache ↩
- janl/mustache.js. GitHub ↩
- defunkt/pystache. GitHub ↩
- cbroglie/mustache. GitHub ↩
- Olivine-Labs/lustache. GitHub ↩
- edwindj/whisker. GitHub ↩
- nickel-org/rust-mustache. GitHub ↩
- Miguel Ping. (2011). What's the advantage of Logic-less template (such as mustache)?. StackOverflow ↩
- janl/mustache.js. GitHub ↩
- Quora. (2016). Which is the best web template engine? ↩