• Anasayfa
  • Eğitimler
    • JavaScript Eğitimi
    • Angular 2 Eğitimi
    • React.js Eğitimi
    • Java 8 Eğitimi
    • Java EE 7 Eğitimi
    • Spring Framework Eğitimi
    • Git Eğitimi
  • Online Eğitimler
    • Online React.js Eğitimi
    • Online Angular 2 Eğitimi
    • Online Spring Boot Eğitimi
  • Referanslar
  • Hakkında
  • İletişim
KodEdu
  • Anasayfa
  • Eğitimler
    • JavaScript Eğitimi
    • Angular 2 Eğitimi
    • React.js Eğitimi
    • Java 8 Eğitimi
    • Java EE 7 Eğitimi
    • Spring Framework Eğitimi
    • Git Eğitimi
  • Online Eğitimler
    • Online React.js Eğitimi
    • Online Angular 2 Eğitimi
    • Online Spring Boot Eğitimi
  • Referanslar
  • Hakkında
  • İletişim

Handlebars Template Çözümü

  • Posted by Kodedu
  • Categories backend, Genel, Uncategorized, Yazılar
  • Date 6 Şubat 2014

Handlebars, Mustache şablon dilini benimseyen hafif bir template çözümüdür. Handlebars, çıkış noktasını Javascript diliyle sağlasa da, farklı programlama dilleri için yazılan kütüphaneler de mevcuttur. Eğer daha önceden Mustache ile ilgili bilginiz yok ise, bu bağlantıdan Mustache yazımızı okuyabilirsiniz.

Javascript ortamındaki template çözümlerinin temel maksadı, bir javascript nesnesi ile bir text veriyi çarpıştırmak ve sonucunda çözümlenmiş bir çıktı üretmektir.

Handlebars, Mustache’da olduğu gibi ikişer tane süslü parantez {{..}}arasında yer alan yer tutuculara sahiptir. İkili mustache yerine üçlüsü de {{{..}}}mevcuttur. Bu yer tutucular, tanımlı isim bilgisine göre Javascript nesnesinden aldığı verilerle giydirilerek çıktı olarak sunulmaktadır. İkili mustache ifadeleri, “<" ve ">” karakterlerini “<” ve “>” olarak çözümlerken (escaped), üçlü mustache ise bu dönüşümü sunmamaktadır (non-escaped).

Örnek 1: Basit Başlangıç örneği olarak aşağıdaki, HTML biçimindeki text şablonunu referans alalım.


<script id="book" type="text/x-handlebars-template">
<div class="panel  panel-primary">
<div class="panel-body">
  <p>{{name}}</p>  
  <p>{{author}}</p> 
  <p>{{price}}</p>  
</div>
</div>
</script>

Bu text şablonda, 3 adet yer tutucu yer almaktadır. name, author ve price. Bu yer tutucular örneğin bu isimdeki alanlara sahip bir Javascript nesnesi ile doldurulabilirdir. Fakat giydirme işleminden önce, template verisi Handlebars tarafından compile edilmelidir. Handlebars bir text şablonu derledikten sonra ortaya bir Javascript fonksiyonu çıkarmaktadır. Çıkarılan bu fonksiyon tekrar tekrar aynı şablonu kullanma olanağı sunmaktadır. Hatta bu şablonlar, Javascript ortamındaki çeşitli araçlarla önceden derlenerek, çalışma anındaki derlenme maliyeti ortadan kaldırılabilmektedir.


var template = $("#book").html();
var compiled = Handlebars.compile(template);

Handlebars nesnesi, Handlebars javascript bağımlılığının sunduğu bir nesnedir. Handlebars.compile(..) fonksiyonu ile de şablon ifade derlenmektedir. Derleme sonucunda ise, bir Javascript fonksiyonu geri döndürülmektedir. Döndürülen Js fonksiyonu ise, parametre olarak gönderilen context nesnesi aracılığıyla, şablon ve nesneyi giydirerek bir String çıktı üretmektedir.


var book = {};
book.name="Java ve Yazılım Tasarımı";
book.author="Altuğ B. Altıntaş";
book.price=34;

var result = compiled(book);

Örneğin üretilen bu fonksiyon aşağıdaki book nesnesiyle giydirilebilirdir. compiled değişkenine book nesnesi paslandığında, result değişkeni içerisinde içerisi giydirilmiş çıktı oluşmaktadır. Aşağıdaki JSBin çıktıdan üretilen sonucu inceleyebilirsiniz.

Handlebars Basic

Örnek 2: each Helper Mustache’da olduğu gibi Handlebars da Javascript dizi nesnelerini döngüsel olarak üretebilmektedir. Bu maksatla “each” isminde bir Helper ifadeye sahiptir. Handlebars ile kendi Helper ifadelerinizi de oluşturabileceğinizi şimdiden belirtmek isterim. Helper ifadeler aralıksız veya aralıklı olarak tanımlanabilmektedir.

Aralıksız ifadeler;

{{helper_name param1 param2 paramN}} şeklinde tanımlanırken,

Aralıklı ifadeler ise;

{{#helper_name param1 param2 paramN}} … {{/helper_name}}

Handlebars ile döngüsel işlemleri kullanmayı sağlayan “each” ifadesi ise, Aralıklı ifadeler kısmına girmektedir.


<script id="book" type="text/x-handlebars-template">
<div class="panel  panel-primary">
<div class="panel-body">
<ul>
{{#each this}}
  <li>{{name}} / {{{author}}} / {{price}}</li>
{{/each}}
</ul> 
</div>
</div>
</script> 

“each” deyimi tek bir parametre almaktadır. Alacağı parametre ise, bir Javascript dizisine karşılık gelmelidir. Burada belirtilen this ifadesi, o andaki context alanına adanan nesneyi temsil etmektedir. this deyimi yerine istenirse . (Nokta) da kullanılabilmektedir. this ifadesine karşılık gelecek Js nesnesi ise, içerisinde 4 Js nesnesi barındıran aşağıdaki Js dizisidir.


var books = [
{
  name:"Java ve Yazılım Tasarımı",
  author:"<b>Altuğ Altıntaş</b>",
  price:34
},
{
  name:"Java Mimarisiyle Kurumsal Çözümler",
  author:"<b>Rahman Usta</b>",
  price:25
},
{ 
 },
{
 }];

“each” deyimli şablon ve Js dizisi çarpıştırıldığında aşağıdaki çıktı üretilmektedir.

Handlebars Collection

Örnek 3:Partials Handlebars ile birden fazla şablon verisini parçalı olarak bütünleştirebiliriz. Parçalı şablonlar {{> partial_name}} deyimiyle referans verilirken, Handlebars.registerPartial(..) fonksiyonu ile de uygulamaya deklare edilmektedir.


<script id="book" type="text/x-handlebars-template">
<div class="panel  panel-primary">
<div class="panel-body">
<table class="table table-responsive">
  <thead><tr>
  <th>ID</th><th>Book name</th><th>Book author</th><th>Book Price</th>  
  </tr></thead>
  <tbody>
   {{> rows}} {{! Bu bir yorum satırıdır.}}
  </tbody>
</table>
</div>
</div>
</script>  
<script id="rows" type="text/x-handlebars-template">
{{#each this}}
  <tr>
  <td>{{@index}}</td><td><b>{{name}}</b></td><td>{{{author}}}</td><td>{{price}}</td>
  </tr>  
{{/each}}    
</script> 

Yukarıda yer alan table elemanının tbody kısmında “rows” isimli parçaya referans verildiği görülebilir.


var books = [
{
  name:"Java ve Yazılım Tasarımı",
  author:"Altuğ B. Altıntaş",
  price:34
},
{
  name:"Java Mimarisiyle Kurumsal Çözümler",
  author:"Rahman Usta",
  price:undefined
}];

Handlebars.registerPartial("rows",$("#rows").html());

var template = $("#book").html();
var compiled = Handlebars.compile(template);

var result = compiled(books);

Handlebars Partials

Örnek 4: if Helper Örnek 4 içindeki bir nesnenin “price” alanı undefined olarak belirtilmiştir. Eğer belirli bir alanın true/false değerine göre çözümleme sağlanmak isteniyorsa Handlebars “if” deyimi kullanılabilir. “if” deyimine verilen parametre true ise ({}, true, 1,10 gibi) aralığın içerisindeki veriler çözümlenmekte, false ise (null, undefined, 0, false, “”, -16 gibi) çözümlenmemektedir.


<script id="rows" type="text/x-handlebars-template">
{{#each this}}
  {{#if this.price}}
  <tr>
  <td>{{@index}}</td>
  <td><b>{{name}}</b></td>
  <td>{{{author}}}</td>
  <td>{{price}}</td>
  </tr>
  {{/if}}  
{{/each}}    
</script>  

“rows” şablonu “if” helper ile düzenlendiğinde “price” alanı falsy değer içerdiği için, o anki nesne için tablo satırı üretilmemektedir.

Handlebars Partials IF

Örnek 5: each-else “each” helper, bir dizi ile döngüsel olarak çıktı üretmektedir. Eğer adanan Js nesnesi boş olması durumunda farklı bir çıktı üretilmek isteniyorsa, “each” aralığında {{else}} helper kullanılabilmektedir. {{else}} helper “if” helper ile de benzer biçimde kullanılabilmektedir.


{{#each this}}
  <tr><td><b>{{name}}</b></td><td>{{{author}}}</td><td>{{price}}</td></tr>
	{{else}}
  <tr><td colspan="3">Henüz kayıt yok</td></tr>
{{/each}}

Handlebars EACH3EMPTY

Örnek6: SubContext Handlebars ile bir nesne ağacının alt ve üst elemanlarına erişilebilmektedir. Subcontext için . (Nokta) kullanılırken, Supercontext için ../ ifadeleri kullanılmaktadır.



var book = {
  name:"Java ve Yazılım Tasarımı",
  author:"Altuğ B. Altıntaş",
  price:34,
  content:[]
};
book.content.push("Kalıtım");
book.content.push(undefined);
book.content.push("MultiThreading");
book.content.push(null);
book.content.push("Çokyüzlülük");
book.content.push(0);
book.content.push("Ağ programlama");
book.content.push(false);

var template = $("#book").html();
var compiled = Handlebars.compile(template);
 
var result = compiled(book);

Örneğin yukarıda yer alan “book” nesnesinin “content” alanındaki diziye erişilmek isteniyorsa, aşağıdaki şekliyle kullanılabilir.


<script id="book" type="text/x-handlebars-template">
<div class="panel  panel-primary">
<div class="panel-heading">
  <h3 class="panel-title">
  {{name}} / <b>{{author}}</b> / {{price}}
  </h3>
  </div>
  <div class="panel-body">
    <ul>
	{{#each this.content}}
	    <li>{{.}}</li>
	{{/each}}
    </ul>
  </div>
</div>
</script> 

Handlebars SubContext1

Örnek7: SubContext Örnek 6 içerisindeki, falsy değerler listelemeden süzülmek isteniyorsa, “if” deyimi kullanılabilir. Handlebars içinde “if” deyimine zıt olarak işleyen “unless” deyimi de yer almaktadır.


<script id="book" type="text/x-handlebars-template">
<div class="panel  panel-primary">
<div class="panel-heading">
  <h3 class="panel-title">
  {{name}} / <b>{{author}}</b> / {{price}}
  </h3>
  </div>
  <div class="panel-body">
    <ul>
    {{#each content}}
      {{#if .}} {{! Dikkat this veya .}}
      <li>{{.}}</li>
      {{/if}}
    {{/each}}
    </ul>
  </div>
</div>
</script>

JS Bin

Örnek 8:Custom Helper Handlebars if, each, unless helper ifadeleri gibi kendi helper deyimleri tanımlayabilmenize de olanak tanımaktadır. Örneğin, if deyimi true/false çıktısına göre içerisinde barındırdığı ifadeleri çözümlemektedir. Fakat if deyiminin 2 ifadeyi karşılaştırma gibi bir fonksiyonu yoktur. Fakat siz kendi helper deyimlerinizi bu istikamette yapılandırabilirsiniz.


var model = [
{
  key:1,
  value:"Ali",
},
{
  key:2,
  value:"Veli",
},
{
  key:3,
  value:"Selami",
},
{
  key:2,
  value:"Elif",
},
{
  key:2,
  value:"Kerim",
},
{
  key:3,
  value:"Murat",
}];

Örneğin yukarıda yer alan Javascript dizisinde, key alanı “2” olan isimlerin listelenmesi isteniyor olsun. Bu karşılaştırma için aşağıda yer alan “ifeq” deyimi özel olarak tanımlanabilir.


Handlebars.registerHelper("ifeq",function(val1,val2,opt){

  return (val1 == val2) ? opt.fn(this) : '';
});

“ifeq” helper deyimi 2 parametre alacağı için aşağıdaki gibi kullanılabilir.


  <ol>
    {{#each this}}
     {{#ifeq key "2"}}
       <li>{{key}} -> {{value}}</li> 
     {{/ifeq}}  
    {{/each}}  
  </ol>

Handlebars Custom Helper

Tekrar görüşmek dileğiyle..

Tag:frontend, handlebars, template

  • Share:
author avatar
Kodedu

Previous post

E-Fatura Schematron Doğrulaması
6 Şubat 2014

Next post

JSR 341 - Expression Language 3
19 Şubat 2014

You may also like

api-logo
Swagger Nedir? Neden kullanılır?
10 Ekim, 2018
spring-cli-logo
Spring CLI ile Spring Boot Projeleri Hazırlamak
21 Ağustos, 2017
eureka_architecture
Spring Cloud Netflix ve Eureka Service Discovery
3 Temmuz, 2017

Leave A Reply Cevabı iptal et

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

E-posta listesine kayıt olun!






Gözde yazılar

Webiner : Java 8 | Project Lambda
07Ara2012
Java EE 8 için yeni plan yolda!
13Eki2016
Swagger Nedir? Neden kullanılır?
10Eki2018
Upucuz ARM Geliştirme Kiti – Kinetis KL25Z
01Eyl2012

Son Yazılar

  • Java’da Record’lar 27 Ocak 2020
  • Swagger Nedir? Neden kullanılır? 10 Ekim 2018
  • Spring CLI ile Spring Boot Projeleri Hazırlamak 21 Ağustos 2017
  • Spring Cloud Netflix ve Eureka Service Discovery 3 Temmuz 2017
  • Online React.js Eğitimi ardından (15-25 Mayıs 2017) 31 Mayıs 2017

Son Yorumlar

  • Naïve Bayes Sınıflandırma Algoritması için Rahman Usta
  • Naïve Bayes Sınıflandırma Algoritması için Mete
  • YAML Nedir? Neden YAML Kullanmalıyız? için kara
  • JWT (JSON Web Tokens) Nedir? Ne işe yarar? için Furkan
  • YAML Nedir? Neden YAML Kullanmalıyız? için shahriyar

Get Java Software

Arşivler

Bizi takip edin

React.js Eğitimi Başlıyor
11-22 Eylül, 2017
Eğitmen
Rahman Usta
İletişim

merhaba@kodedu.com

  • Hakkında
  • Gizlilik Politikası
  • İletişim
  • Referanslar
Kodedu Bilişim Danışmanlık
Cemil Meriç mah. Çelebi sok.
No:16/3 Ümraniye/İSTANBUL
Tel: 0850 885 38 65
Alemdağ V.D.: 8960484815

KODEDU © Tüm hakları saklıdır.