Handlerbars.js nedir? Nasil kullanilir?

kpmakaleler
  • Turgay Can
  • Tarih

    08 Aug, 2014
  • Yorum

    0
  • Görüntüleme

    1838
  • İndirme

    0

Handlerbars.js nedir? Nasil kullanilir?

Handlebars, semantik bir web template(şablon) sistemidir. Mustache template sistemi ile uyumludur. Handlebars içine yüklenip, Mustache 'in esnekliği ve nimetlerindende faydalanabilirsiniz.

Handlebars olayı biraz daha mantıksal kontroller ile (#if, #else, #each(for loop), #with, #unless) ön yüzde göstereceğimiz datanın gösteriminde bize esneklik sağlamış oluyor. Ek olarak Utils kütüphanesi ile nesnenin null/undefined gibi boş kontrolü, güvenlik için bazı (<, >, " vb. gibi) karakterlerin escape edilmesi gibi ek özellikleride beraberinde getiriyor.

Sunucu tarafından gelen datayı {{, {{{ gibi işaretçiler içinde gösterebiliyorsunuz ve json data tipine benzer modellere ekliyorsunuz. Expressionlar için tıklayınız..

Handlebars'ın sitesinden basit bir örnek ile devam edelim ;

Html template(şablon)'imiz aşağıdaki gibi olsun.

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

Browser içinde ilgili template'imizi için tanımlıyoruz.

<script id="entry-template" type="text/x-handlebars-template">
  template content
</script>

Html içinde aşağıdaki gibi html tarafını template'imizin hazırlamış bulunduk;

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>
</script>

İşin şimdi JavaScript tarafına bakalım.

Template'imizi id değeri üzerinden jQuery kütüphanesi ile elde edip, html metodu ile html nesnesine çeviriyoruz sonrasında ise Handlebars kütüphanemizin compile metodu ile compile işlemini gerçekleştiriyoruz.

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

context modelimizi Handlebars'ın expression(tanım) işaretçilerine göre tanımlıyoruz.

Context nesnemiz, title ve body adında iki değişken içermektedir.

var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);

JavaScript'lerimizin toparlarsak ;

var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

$('body').append(template(data));]

en son kısımda jQuery'nin append metodu ile template'imizi body aralığında bulunan template'imiz içine ekliyoruz.

Kütüphaneyi indirmek için tıklayınız...

Benden bu kadar :) Tavsiye ettiğim ve kullanılmasını önerdiğim bir javascript template framework'üdür.

0 Yorum..

Yorum yapmak için "Giriş yapın" yada "Misafir üye" olarak yorum yapabilirsiniz.

Yorum Yap