Handlebars.js Nedir? Nasıl Kullanılır?

Ortaya çıkan ihtiyaçlar ve minimum kaynak ile maksimum performans arayışı ise dinamik yapıların her zamankinden daha fazla öne çıkmasına neden olmakta. İşte tam bu noktada JavaScript’in sağladığı dinamizm büyük bir önem kazanmakta ve bu durum kısa zaman içerisinde değişebilecek bir trend olmaktan öte yeni iş yapış biçimlerinin yeni standartlar haline gelmesini sağlamakta. Ancak, JavaScript uygulamaları DOM manipülasyonu için yeterli olsa da sayfa temelinde kapsamlı işlemler yürütmek (örneğin, view işlemlerini yeniden ele almak) istediğimizde bir adım daha öne çıkmalıyız. İşte bu noktada şablon (templating) kütüphanelerinin desteğine ihtiyaç duyuyoruz.

İlerleyen zaman içerisinde farklı ihtiyaçlara odaklanan farklı sistemlere değinmeye devam edeceğim. Bu yazıyla da bir başlangıç yapmış olalım ve Ghost tarafından da kullanılan¹ JavaScript temelli bir şablon sistemi (JavaScript templating) olan Handlebars ile yazı serisini başlatalım.

Handlebars.js

Yazının giriş paragrafında da belirttiğim üzere, ihtiyaçlar çerçevesinde değerlendirilebilecek pek çok JavaScript şablon kütüphanesi bulunmakta ve handlebars.js değerlendirilebilecek alternatiflerden sadece bir tanesi. jQuery tarafından da duyurulan² resmi bir eklenti (plugin) olmasına karşın süreç içerisinde eklentinin geliştirilmesi durduruldu³.

Yıllar içerisinde pek çok benzer çalışma ortaya çıktı, kimileri günümüzde yoğunlukla tercih edilen ve standartları belirleyen özelliklere sahip olurken kimileri de tarihin tozlu sayfalarında yer alan isimler olarak kaldılar. Minimal bir şablonlama sistemi olan handlebars.js başarılı örneklerden biri⁴.

Kolaylıkla semantic şablonlar oluşturmaya başlayabileceğiniz Handlebars, Mustache (logic-less templating) ile de oldukça uyumlu ve bu sayede mevcut şablonları kullanmaya devam edebilmektesiniz⁵. Örnek bir handlebars ifadesine göz atalım⁶:

<h1>{{title}}</h1>

h1 etiketi içerisinde {{}} ile tanımlanan title ifadesi (expression), ilgili bağlamda tanımlanmış değeri title özelliğine (property) atayacaktır. Aynı örneği biraz daha spesifik bir kullanım ihtiyacına yönelik (örneğin makale başlığı için) yine Handlebars tarafından desteklenen iki kullanım üzerinden (dot-seperated ve deprecated) ele alalım⁷.

<h1>{{article.title}}</h1>
<h1>{{article/title}}</h1>

Şimdide kısaca tanımladığımız bu ifadeyi bir HTML yığını içerisine yerleştirelim:

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

Aynı işlemi HTML yığını yerine JavaScript yapısı içerisinde ele alalım⁸:

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

Handlebars.js Kurulum

Handlebars.js kullanımına hızlı bir şekilde başlamak için Handlebars.js GitHub dağıtımından veya diğer alternatif kaynaklardan faydalanabiliriz.

<script type="text/javascript" src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-latest.js" />

Kurulumu YARN veya NPM paket yöneticileri üzerinden indirmek isterseniz:

YARN

yarn add handlebars

NPM

npm install -g handlebars

Handlebars.js Kullanımı

Aşağıda bir tablo üzerinden oluşturduğum basit bir tablo görmektesiniz. JS ve HTML tab'leri ile detaylarını görebileceğiniz bu tablo basit bir şekilde bir araya gelmiş expression'lar, bir block ve block içeriğini kontrol eden bir koşuldan (statement) ibaret. Block'lar # ile tanımlanırlar.

<div id="content"></div>

<script id="template" type="text/x-handlebars-template">
 <table class="ui celled collapsing table">
  <thead>
   <th>User ID</th>
   <th>Personal Number</th>
   <th>Name</th>
   <th>Company</th>
   <th>E-Mail</th>
   <th>Address</th>
  </thead>
  <tbody>
  {{#if users}}
   {{#users}}
   <tr class="{{status}}">
    <td>{{userID}}</td>
    <td>{{personalNumber}}</td>
    <td>{{name}}</td>
    <td>{{company}}</td>
    <td>{{eMail}}</td>
    <td><a href="https://www.google.com/maps/?q={{address}}">{{address}}</a></td>
   </tr>
   {{/users}}
  {{else}}
   <tr class="error">
    <td colspan="6">No User!</td>
   </tr>
  {{/if}}
  </tbody>
 </table>
</script>

Yukarıdaki örneğe biraz daha yakından bakalım.

Expression'lar

{{status}}, {{userID}}, {{personalNumber}}, {{name}}, {{company}}, {{eMail}}, {{address}}

Block

users

Helper

{{#if users}}...{{else}}...{{/if}} ise users koşul olarak (statement) block içeriğini kontrol etmekte ve içerik olmaması durumunda {{else}} içeriğinde yer alan ifadeyi ekrana yazdıracaktır.

Şablonumuz hazır olduğuna göre verilerimizi (compiledCode(data)) ilgili alanlara Handlebars.compile($("#template").html()) ile atayabiliriz.

$(document).ready(function(){
 var data = {
  users: [{
   userID: "332757CA-9D20-56F8-613A-7DA5655EC658",
   personalNumber: "16600821-5862",
   name: "Dexter Smith",
   company: "Vestibulum Accumsan Neque Associates",
   eMail: "amet.diam.eu@acturpis.co.uk",
   address: "55.9657, -61.40143",
   status: ""
   }
  ]
 };
 var template = $("#template").html();
 var compiledCode = Handlebars.compile(template);
 var result = compiledCode(data);

 $("#content").html(result);
});

Evet, şablonumuzun içeriği kod parçacığında da görüldüğü üzere JSON formatındaki users içeriğinden gelmekte. Yukarıda bahsi geçen örneği çalışır bir şekilde JSFiddle sayfası üzerinden inceleyebilirsiniz.

Sonuç Olarak

Basit örneklerin yanı sıra Handlebars ile ilgili partials, block helpers, global helpers gibi değinilmesi gereken daha pek çok konu mevcut. Hedefim ise bu konuların ardından basit bir hem Ghost hem de WordPress için bir tema hazırlayabiliyor olmamız. Şimdilik başlangıç yazısını burada sonlandırabiliriz. Yeni eklenecek yazılardan haberdar olmak için aşağıdaki forma e-posta adresinizi yazıp Abone Ol butonunu tıklamanız yeterli.